<template>
  <div class="app-container">
    <div class="report-request-item">
      <!-- 根据要求提供报告区域 -->
      <div class="report-request">
        <span class="request-title">On Request Reports</span>
        <span class="request-description">Request a new report for the selected report type. Download the CSV files to
          review the reports.</span>
      </div>

      <!-- 选择报告类型下拉框：用于请求报告 -->
      <el-form :model="requestQueryForm" ref="requestQueryForm" size="small" :inline="true" v-show="showSearch"
        label-width="68px">

        <!-- 使用 el-row 和 el-col 来将报告类型、发布状态和履行类型放在同一行 -->
        <el-row :gutter="10">
          <el-col :span="8">
            <el-form-item label="Report Type" prop="reportType" label-width="100px">
              <el-select v-model="requestQueryForm.reportType" placeholder="请选择报告类型" @change="handleReportTypeChange">
                <el-option v-for="dict in dict.type.walmart_report_request_type" :key="dict.value" :label="dict.label"
                  :value="dict.value" />
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>

        <!-- 选择报告类型为 ITEM 时显示额外的输入框 -->
        <div v-if="requestQueryForm.reportType === '1'">
          <h2>Filter</h2>

          <el-row>
            <el-col :span="10">
              <el-form-item label="Publish status" label-width="115px">
                <el-select v-model="requestQueryForm.publishStatus" placeholder="Select" multiple>
                  <el-option v-for="status in dict.type.walmart_publish_status" :key="status.value"
                    :label="status.label" :value="status.value" />
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="Fulfillment type" label-width="118px">
                <el-select v-model="requestQueryForm.fulfillmentType" placeholder="Select" multiple>
                  <el-option v-for="type in dict.type.walmart_fulfillment_types" :key="type.value" :label="type.label"
                    :value="type.value" />
                </el-select>
              </el-form-item>
            </el-col>
          </el-row>
          <!-- 使用 el-row 和 el-col 来将商品创建日期和商品最后更新时间放在同一行 -->
          <el-row :gutter="10">
            <el-col :span="10">
              <el-form-item label="Item Creation Date" label-width="142px">
                <el-row :gutter="10">
                  <el-col :span="11">
                    <el-date-picker v-model="requestQueryForm.createStartDate" type="date" placeholder="Start Date"
                      style="width: 100%" @change="handleCreationStartDateChange" />
                  </el-col>
                  <el-col :span="11">
                    <el-date-picker v-model="requestQueryForm.createEndDate" type="date" placeholder="End Date"
                      style="width: 100%" :disabled="!requestQueryForm.createStartDate" />
                  </el-col>
                </el-row>
              </el-form-item>
            </el-col>

            <el-col :span="10">
              <el-form-item label="Item Last Updated" label-width="140px">
                <el-row :gutter="10">
                  <el-col :span="11">
                    <el-date-picker v-model="requestQueryForm.lastUpdatedStartDate" type="date" placeholder="Start Date"
                      style="width: 100%" @change="handleUpdatedStartDateChange" />
                  </el-col>
                  <el-col :span="11">
                    <el-date-picker v-model="requestQueryForm.lastUpdatedEndDate" type="date" placeholder="End Date"
                      style="width: 100%" :disabled="!requestQueryForm.lastUpdatedStartDate" />
                  </el-col>
                </el-row>
              </el-form-item>
            </el-col>
          </el-row>

        </div>
      </el-form>

      <hr />

      <!-- 按钮部分：请求报告和取消 -->
      <div class="button-group">
        <el-button :disabled="isButtonDisabled" type="default" size="mini"
          @click="handleCancelRequest">Cancel</el-button>
        <el-button :disabled="isButtonDisabled" type="primary" size="mini" @click="handleRequestReport"
          :loading="loadingButton" v-hasPermi="['datacenter:report:add']">Request report</el-button>
      </div>
    </div>


    <!-- 搜索报告部分 -->
    <div class="report-query-item">
      <el-form :model="queryParams" ref="queryForm" size="small" :inline="true" v-show="showSearch" label-width="68px">
        <el-form-item label="Report Type" prop="reportType" label-width="100px">
          <el-select v-model="queryParams.reportType" placeholder="Select" @change="handleReportTypeChangeQuery">
            <el-option v-for="dict in dict.type.walmart_report_request_type" :key="dict.value" :label="dict.label"
              :value="dict.value" />
          </el-select>
        </el-form-item>
      </el-form>
      <right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar>


      <!-- <el-row :gutter="10" class="mb8">
      <el-col :span="1.5">
        <el-button type="primary" plain icon="el-icon-plus" size="mini" @click="handleAdd"
          v-hasPermi="['datacenter:report:add']">新增</el-button>
      </el-col>
      <el-col :span="1.5">
        <el-button type="success" plain icon="el-icon-edit" size="mini" :disabled="single" @click="handleUpdate"
          v-hasPermi="['datacenter:report:edit']">修改</el-button>
      </el-col>
      <el-col :span="1.5">
        <el-button type="danger" plain icon="el-icon-delete" size="mini" :disabled="multiple" @click="handleDelete"
          v-hasPermi="['datacenter:report:remove']">删除</el-button>
      </el-col>
      <el-col :span="1.5">
        <el-button type="warning" plain icon="el-icon-download" size="mini" @click="handleExport"
          v-hasPermi="['datacenter:report:export']">导出</el-button>
      </el-col>
      
    </el-row> -->

      <!-- 数据表格 -->
      <el-table :data="reportList" v-loading="loading" @selection-change="handleSelectionChange" style="width: 100%">
        <el-table-column label="Report Type" prop="reportType" min-width="180">
          <template slot-scope="scope">
            <dict-tag :options="dict.type.walmart_report_request_type" :value="scope.row.reportType || '-'" />
          </template>
        </el-table-column>

        <el-table-column label="Date and time requested" prop="requiredDateTime" min-width="180"
          :formatter="formatDateTime" empty-text="-">
        </el-table-column>


        <el-table-column label="Date and time completed" prop="completionDateTime" min-width="180"
          :formatter="formatDateTime" empty-text="-">
        </el-table-column>

        <el-table-column label="Report filter" prop="reportFilter" min-width="120">
          <template slot-scope="scope">
            <!-- 使用 title 属性显示完整内容，文本超出时显示省略号 -->
            <span class="ellipsis-text"
              :title="scope.row.reportFilter && scope.row.reportFilter != '{}' ? scope.row.reportFilter : '-'">
              {{ scope.row.reportFilter && scope.row.reportFilter != '{}' ? scope.row.reportFilter : '-' }}
            </span>
          </template>
        </el-table-column>


        <el-table-column label="Status" align="center" prop="status" min-width="120">
          <template slot-scope="scope">
            <dict-tag :options="dict.type.walmart_report_status" :value="scope.row.status || '-'" />
          </template>
        </el-table-column>

        <el-table-column label="Download" min-width="120" fixed="right" align="center">
          <template slot-scope="scope">
            <!-- 下载图标，仅当 status 为 3 时才可点击 -->
            <svg  v-hasPermi="['datacenter:report:download']" t="1739521753007" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg"
              p-id="5070" width="25" height="25"
              @click="scope.row.status === 3 ? walmartDownloadReport(scope.row) : handleReportNotReady(scope)">
              <path
                d="M326.961404 659.312281l174.259649 174.259649c19.761404 19.761404 53.894737 19.761404 75.452631 0l174.259649-174.259649h-127.550877V440.140351c0-46.708772-37.726316-84.435088-84.435088-84.435088s-84.435088 37.726316-84.435087 84.435088v219.17193h-127.550877z"
                fill="#8a8a8a" p-id="5071"></path>
              <path
                d="M858.722807 878.484211c-52.098246 0-102.4-25.150877-132.940351-68.266667-10.778947-16.168421-7.185965-37.726316 8.982456-48.505263s37.726316-7.185965 48.505263 8.982456c17.964912 25.150877 44.912281 39.522807 75.452632 39.522807 50.301754 0 91.621053-41.319298 91.621053-91.621053 0-26.947368-10.778947-52.098246-30.540351-68.266666l-19.761404-17.964913 10.778948-23.354386c19.761404-41.319298 28.74386-84.435088 28.743859-129.347368 0-163.480702-132.940351-298.217544-298.217544-298.217544-91.621053 0-177.852632 41.319298-235.34035 114.975439l-12.575439 17.964912-21.557895-3.592983c-10.778947-1.796491-19.761404-3.592982-30.540351-3.592982-88.02807 0-159.887719 71.859649-159.887719 159.887719 0 7.185965 0 16.168421 1.796491 23.354386l3.592983 26.947369-25.150877 10.778947c-53.894737 23.354386-88.02807 75.452632-88.028071 134.736842 0 80.842105 64.673684 145.515789 145.51579 145.51579 23.354386 0 44.912281-5.389474 66.470175-16.168421 17.964912-8.982456 39.522807-1.796491 48.505263 16.168421s1.796491 39.522807-16.168421 48.505263c-30.540351 16.168421-64.673684 23.354386-98.807017 23.354386-118.568421 0-215.578947-97.010526-215.578948-215.578948 0-79.045614 41.319298-149.108772 107.789474-186.835087v-8.982456c0-127.550877 104.196491-231.747368 231.747369-231.747369 7.185965 0 14.37193 0 23.354386 1.796491 70.063158-80.842105 170.666667-125.754386 276.659649-125.754386 203.003509 0 368.280702 165.277193 368.280701 368.280702 0 48.505263-8.982456 93.417544-26.947368 138.329825 23.354386 28.74386 35.929825 64.673684 35.929825 102.4 1.796491 84.435088-71.859649 156.294737-161.684211 156.294737z"
                fill="#8a8a8a" p-id="5072"></path>
            </svg>
          </template>
        </el-table-column>

        <el-table-column label="Operation" fixed="right" min-width="80">
          <template slot-scope="scope">
            <!-- 查看按钮，仅当 status 为 3 时才可点击 -->
            <el-button size="mini" v-hasPermi="['datacenter:report:query']"
              @click="scope.row.status === 3 ? viewDetails(scope.row) : handleReportNotReady(scope)">
              查看
            </el-button>
          </template>
        </el-table-column>
      </el-table>

      <pagination v-show="total > 0" :total="total" :page.sync="queryParams.pageNum" :limit.sync="queryParams.pageSize"
        @pagination="getList" />

      <!-- 项目报告弹窗 -->
      <el-dialog :visible.sync="ItemDialogVisible" title="Item Report Details" width="80%"
        :before-close="handleBeforeClose">
        <el-table :data="itemReportDetails" style="width: 100%">
          <el-table-column label="Item ID" prop="itemId" min-width="180">
            <template slot-scope="scope">
              <el-tooltip class="item" effect="dark" :content="String(scope.row.itemId)" placement="top">
                <span class="ellipsis-text">{{ scope.row.itemId }}</span>
              </el-tooltip>
            </template>
          </el-table-column>

          <el-table-column label="SKU" prop="sku" min-width="180">
            <template slot-scope="scope">
              <el-tooltip class="item" effect="dark" :content="String(scope.row.sku)" placement="top">
                <span class="ellipsis-text">{{ scope.row.sku }}</span>
              </el-tooltip>
            </template>
          </el-table-column>

          <el-table-column label="Product Name" prop="productName" min-width="180">
            <template slot-scope="scope">
              <el-tooltip class="item" effect="dark" :content="String(scope.row.productName)" placement="top">
                <span class="ellipsis-text">{{ scope.row.productName }}</span>
              </el-tooltip>
            </template>
          </el-table-column>

          <el-table-column label="Lifecycle Status" prop="lifecycleStatus" min-width="180">
            <template slot-scope="scope">
              <el-tooltip class="item" effect="dark" :content="String(scope.row.lifecycleStatus)" placement="top">
                <span class="ellipsis-text">{{ scope.row.lifecycleStatus }}</span>
              </el-tooltip>
            </template>
          </el-table-column>

          <el-table-column label="Publish Status" prop="publishStatus" min-width="180">
            <template slot-scope="scope">
              <el-tooltip class="item" effect="dark" :content="String(scope.row.publishStatus)" placement="top">
                <span class="ellipsis-text">{{ scope.row.publishStatus }}</span>
              </el-tooltip>
            </template>
          </el-table-column>

          <el-table-column label="Status Change Reason" prop="statusChangeReason" min-width="180">
            <template slot-scope="scope">
              <el-tooltip class="item" effect="dark" :content="String(scope.row.statusChangeReason)" placement="top">
                <span class="ellipsis-text">{{ scope.row.statusChangeReason }}</span>
              </el-tooltip>
            </template>
          </el-table-column>

          <el-table-column label="Product Category" prop="productCategory" min-width="180">
            <template slot-scope="scope">
              <el-tooltip class="item" effect="dark" :content="String(scope.row.productCategory)" placement="top">
                <span class="ellipsis-text">{{ scope.row.productCategory }}</span>
              </el-tooltip>
            </template>
          </el-table-column>

          <el-table-column label="Price" prop="price" min-width="180">
            <template slot-scope="scope">
              <el-tooltip class="item" effect="dark" :content="String(scope.row.price)" placement="top">
                <span class="ellipsis-text">{{ scope.row.price }}</span>
              </el-tooltip>
            </template>
          </el-table-column>

          <el-table-column label="Currency" prop="currency" min-width="180">
            <template slot-scope="scope">
              <el-tooltip class="item" effect="dark" :content="String(scope.row.currency)" placement="top">
                <span class="ellipsis-text">{{ scope.row.currency }}</span>
              </el-tooltip>
            </template>
          </el-table-column>

          <el-table-column label="Buy Box Item Price" prop="buyBoxItemPrice" min-width="180">
            <template slot-scope="scope">
              <el-tooltip class="item" effect="dark" :content="String(scope.row.buyBoxItemPrice)" placement="top">
                <span class="ellipsis-text">{{ scope.row.buyBoxItemPrice }}</span>
              </el-tooltip>
            </template>
          </el-table-column>

          <el-table-column label="Buy Box Shipping Price" prop="buyBoxShippingPrice" min-width="180">
            <template slot-scope="scope">
              <el-tooltip class="item" effect="dark" :content="String(scope.row.buyBoxShippingPrice)" placement="top">
                <span class="ellipsis-text">{{ scope.row.buyBoxShippingPrice }}</span>
              </el-tooltip>
            </template>
          </el-table-column>

          <el-table-column label="MSRP" prop="msrp" min-width="180">
            <template slot-scope="scope">
              <el-tooltip class="item" effect="dark" :content="String(scope.row.msrp)" placement="top">
                <span class="ellipsis-text">{{ scope.row.msrp }}</span>
              </el-tooltip>
            </template>
          </el-table-column>

          <el-table-column label="Product Tax Code" prop="productTaxCode" min-width="180">
            <template slot-scope="scope">
              <el-tooltip class="item" effect="dark" :content="String(scope.row.productTaxCode)" placement="top">
                <span class="ellipsis-text">{{ scope.row.productTaxCode }}</span>
              </el-tooltip>
            </template>
          </el-table-column>

          <el-table-column label="Shipping Methods" prop="shipMethods" min-width="180">
            <template slot-scope="scope">
              <el-tooltip class="item" effect="dark" :content="String(scope.row.shipMethods)" placement="top">
                <span class="ellipsis-text">{{ scope.row.shipMethods }}</span>
              </el-tooltip>
            </template>
          </el-table-column>

          <el-table-column label="Shipping Weight" prop="shippingWeight" min-width="180">
            <template slot-scope="scope">
              <el-tooltip class="item" effect="dark" :content="String(scope.row.shippingWeight)" placement="top">
                <span class="ellipsis-text">{{ scope.row.shippingWeight }}</span>
              </el-tooltip>
            </template>
          </el-table-column>

          <el-table-column label="Shipping Weight Unit" prop="shippingWeightUnit" min-width="180">
            <template slot-scope="scope">
              <el-tooltip class="item" effect="dark" :content="String(scope.row.shippingWeightUnit)" placement="top">
                <span class="ellipsis-text">{{ scope.row.shippingWeightUnit }}</span>
              </el-tooltip>
            </template>
          </el-table-column>

          <el-table-column label="Fulfillment Lag Time" prop="fulfillmentLagTime" min-width="180">
            <template slot-scope="scope">
              <el-tooltip class="item" effect="dark" :content="String(scope.row.fulfillmentLagTime)" placement="top">
                <span class="ellipsis-text">{{ scope.row.fulfillmentLagTime }}</span>
              </el-tooltip>
            </template>
          </el-table-column>

          <el-table-column label="Fulfillment Type" prop="fulfillmentType" min-width="180">
            <template slot-scope="scope">
              <el-tooltip class="item" effect="dark" :content="String(scope.row.fulfillmentType)" placement="top">
                <span class="ellipsis-text">{{ scope.row.fulfillmentType }}</span>
              </el-tooltip>
            </template>
          </el-table-column>

          <el-table-column label="WFS Sales Restriction" prop="wfsSalesRestriction" min-width="180">
            <template slot-scope="scope">
              <el-tooltip class="item" effect="dark" :content="String(scope.row.wfsSalesRestriction)" placement="top">
                <span class="ellipsis-text">{{ scope.row.wfsSalesRestriction }}</span>
              </el-tooltip>
            </template>
          </el-table-column>

          <el-table-column label="WPID" prop="wpid" min-width="180">
            <template slot-scope="scope">
              <el-tooltip class="item" effect="dark" :content="String(scope.row.wpid)" placement="top">
                <span class="ellipsis-text">{{ scope.row.wpid }}</span>
              </el-tooltip>
            </template>
          </el-table-column>

          <el-table-column label="GTIN" prop="gtin" min-width="180">
            <template slot-scope="scope">
              <el-tooltip class="item" effect="dark" :content="String(scope.row.gtin)" placement="top">
                <span class="ellipsis-text">{{ scope.row.gtin }}</span>
              </el-tooltip>
            </template>
          </el-table-column>

          <el-table-column label="UPC" prop="upc" min-width="180">
            <template slot-scope="scope">
              <el-tooltip class="item" effect="dark" :content="String(scope.row.upc)" placement="top">
                <span class="ellipsis-text">{{ scope.row.upc }}</span>
              </el-tooltip>
            </template>
          </el-table-column>

          <el-table-column label="Item Page URL" prop="itemPageUrl" min-width="180">
            <template slot-scope="scope">
              <el-tooltip class="item" effect="dark" :content="String(scope.row.itemPageUrl)" placement="top">
                <span class="ellipsis-text">{{ scope.row.itemPageUrl }}</span>
              </el-tooltip>
            </template>
          </el-table-column>

          <el-table-column label="Primary Image URL" prop="primaryImageUrl" min-width="180">
            <template slot-scope="scope">
              <el-tooltip class="item" effect="dark" :content="String(scope.row.primaryImageUrl)" placement="top">
                <span class="ellipsis-text">{{ scope.row.primaryImageUrl }}</span>
              </el-tooltip>
            </template>
          </el-table-column>

          <el-table-column label="Shelf Name" prop="shelfName" min-width="180">
            <template slot-scope="scope">
              <el-tooltip class="item" effect="dark" :content="String(scope.row.shelfName)" placement="top">
                <span class="ellipsis-text">{{ scope.row.shelfName }}</span>
              </el-tooltip>
            </template>
          </el-table-column>

          <el-table-column label="Primary Category Path" prop="primaryCategoryPath" min-width="180">
            <template slot-scope="scope">
              <el-tooltip class="item" effect="dark" :content="String(scope.row.primaryCategoryPath)" placement="top">
                <span class="ellipsis-text">{{ scope.row.primaryCategoryPath }}</span>
              </el-tooltip>
            </template>
          </el-table-column>

          <el-table-column label="Brand" prop="brand" min-width="180">
            <template slot-scope="scope">
              <el-tooltip class="item" effect="dark" :content="String(scope.row.brand)" placement="top">
                <span class="ellipsis-text">{{ scope.row.brand }}</span>
              </el-tooltip>
            </template>
          </el-table-column>

          <el-table-column label="Offer Start Date" prop="offerStartDate" min-width="180">
            <template slot-scope="scope">
              <el-tooltip class="item" effect="dark" :content="String(scope.row.offerStartDate)" placement="top">
                <span class="ellipsis-text">{{ scope.row.offerStartDate }}</span>
              </el-tooltip>
            </template>
          </el-table-column>

          <el-table-column label="Offer End Date" prop="offerEndDate" min-width="180">
            <template slot-scope="scope">
              <el-tooltip class="item" effect="dark" :content="String(scope.row.offerEndDate)" placement="top">
                <span class="ellipsis-text">{{ scope.row.offerEndDate }}</span>
              </el-tooltip>
            </template>
          </el-table-column>

          <el-table-column label="Item Creation Date" prop="itemCreationDate" min-width="180">
            <template slot-scope="scope">
              <el-tooltip class="item" effect="dark" :content="String(scope.row.itemCreationDate)" placement="top">
                <span class="ellipsis-text">{{ scope.row.itemCreationDate }}</span>
              </el-tooltip>
            </template>
          </el-table-column>

          <el-table-column label="Item Last Updated" prop="itemLastUpdated" min-width="180">
            <template slot-scope="scope">
              <el-tooltip class="item" effect="dark" :content="String(scope.row.itemLastUpdated)" placement="top">
                <span class="ellipsis-text">{{ scope.row.itemLastUpdated }}</span>
              </el-tooltip>
            </template>
          </el-table-column>

          <el-table-column label="Reviews Count" prop="reviewsCount" min-width="180">
            <template slot-scope="scope">
              <el-tooltip class="item" effect="dark" :content="String(scope.row.reviewsCount)" placement="top">
                <span class="ellipsis-text">{{ scope.row.reviewsCount }}</span>
              </el-tooltip>
            </template>
          </el-table-column>

          <el-table-column label="Average Rating" prop="averageRating" min-width="180">
            <template slot-scope="scope">
              <el-tooltip class="item" effect="dark" :content="String(scope.row.averageRating)" placement="top">
                <span class="ellipsis-text">{{ scope.row.averageRating }}</span>
              </el-tooltip>
            </template>
          </el-table-column>

          <el-table-column label="Searchable" prop="searchable" min-width="180">
            <template slot-scope="scope">
              <el-tooltip class="item" effect="dark" :content="String(scope.row.searchable)" placement="top">
                <span class="ellipsis-text">{{ scope.row.searchable }}</span>
              </el-tooltip>
            </template>
          </el-table-column>

          <el-table-column label="Competitor URL" prop="competitorUrl" min-width="180">
            <template slot-scope="scope">
              <el-tooltip class="item" effect="dark" :content="String(scope.row.competitorUrl)" placement="top">
                <span class="ellipsis-text">{{ scope.row.competitorUrl }}</span>
              </el-tooltip>
            </template>
          </el-table-column>

          <el-table-column label="Competitor Price" prop="competitorPrice" min-width="180">
            <template slot-scope="scope">
              <el-tooltip class="item" effect="dark" :content="String(scope.row.competitorPrice)" placement="top">
                <span class="ellipsis-text">{{ scope.row.competitorPrice }}</span>
              </el-tooltip>
            </template>
          </el-table-column>

          <el-table-column label="Competitor Ship Price" prop="competitorShipPrice" min-width="180">
            <template slot-scope="scope">
              <el-tooltip class="item" effect="dark" :content="String(scope.row.competitorShipPrice)" placement="top">
                <span class="ellipsis-text">{{ scope.row.competitorShipPrice }}</span>
              </el-tooltip>
            </template>
          </el-table-column>

          <el-table-column label="Competitor Last Date Fetched" prop="competitorLastDateFetched" min-width="220">
            <template slot-scope="scope">
              <el-tooltip class="item" effect="dark" :content="String(scope.row.competitorLastDateFetched)"
                placement="top">
                <span class="ellipsis-text">{{ scope.row.competitorLastDateFetched }}</span>
              </el-tooltip>
            </template>
          </el-table-column>

        </el-table>

        <!-- 添加分页 -->
        <pagination v-show="total > 0" :total="total" :page.sync="pagination.pageNum" :limit.sync="pagination.pageSize"
          @pagination="viewDetails" />
      </el-dialog>




      <!-- 库存报告相关代码 -->
      <el-dialog :visible.sync="inventroyDialogVisible" title="Inventory Report Details" width="80%"
        :before-close="handleBeforeClose">
        <el-table :data="itemReportDetails" style="width:100%">

          <!-- 商品 SKU -->
          <el-table-column label="SKU" prop="sku" min-width="180">
            <template slot-scope="scope">
              <el-tooltip class="item" effect="dark" :content="String(scope.row.sku)" placement="top">
                <span class="ellipsis-text">{{ scope.row.sku }}</span>
              </el-tooltip>
            </template>
          </el-table-column>

          <!-- 商品 ItemID -->
          <el-table-column label="ItemID" prop="itemId" min-width="180">
            <template slot-scope="scope">
              <el-tooltip class="item" effect="dark" :content="String(scope.row.itemId)" placement="top">
                <span class="ellipsis-text">{{ scope.row.itemId }}</span>
              </el-tooltip>
            </template>
          </el-table-column>

          <!-- 商品名称 -->
          <el-table-column label="ProductName" prop="productName" min-width="180">
            <template slot-scope="scope">
              <el-tooltip class="item" effect="dark" :content="String(scope.row.productName)" placement="top">
                <span class="ellipsis-text">{{ scope.row.productName }}</span>
              </el-tooltip>
            </template>
          </el-table-column>

          <!-- 发货节点名称 -->
          <el-table-column label="Ship Node Name" prop="shipNodeName" min-width="180">
            <template slot-scope="scope">
              <el-tooltip class="item" effect="dark" :content="String(scope.row.shipNodeName)" placement="top">
                <span class="ellipsis-text">{{ scope.row.shipNodeName }}</span>
              </el-tooltip>
            </template>
          </el-table-column>

          <!-- 输入的商品数量 -->
          <el-table-column label="Input Quantity" prop="inputQuantity" min-width="180">
            <template slot-scope="scope">
              <el-tooltip class="item" effect="dark" :content="String(scope.row.inputQuantity)" placement="top">
                <span class="ellipsis-text">{{ scope.row.inputQuantity }}</span>
              </el-tooltip>
            </template>
          </el-table-column>

          <!-- 可销售的商品数量 -->
          <el-table-column label="Available to Sell Quantity" prop="availToSellQuantity" min-width="180">
            <template slot-scope="scope">
              <el-tooltip class="item" effect="dark" :content="String(scope.row.availToSellQuantity)" placement="top">
                <span class="ellipsis-text">{{ scope.row.availToSellQuantity }}</span>
              </el-tooltip>
            </template>
          </el-table-column>
        </el-table>

        <!-- 添加分页 -->
        <pagination v-show="total > 0" :total="total" :page.sync="pagination.pageNum" :limit.sync="pagination.pageSize"
          @pagination="viewDetails" />
      </el-dialog>



      <!-- Shipping Configuration 报告弹窗 -->
      <el-dialog :visible.sync="shippingConfigDialogVisible" title="Shipping Configuration Report Details" width="80%"
        :before-close="handleBeforeClose">
        <el-table :data="itemReportDetails" style="width:100%">

          <!-- SKU -->
          <el-table-column label="SKU" prop="sku" min-width="180">
            <template slot-scope="scope">
              <el-tooltip class="item" effect="dark" :content="String(scope.row.sku)" placement="top">
                <span class="ellipsis-text">{{ scope.row.sku }}</span>
              </el-tooltip>
            </template>
          </el-table-column>

          <!-- Item ID -->
          <el-table-column label="Item ID" prop="itemId" min-width="180">
            <template slot-scope="scope">
              <el-tooltip class="item" effect="dark" :content="String(scope.row.itemId)" placement="top">
                <span class="ellipsis-text">{{ scope.row.itemId }}</span>
              </el-tooltip>
            </template>
          </el-table-column>

          <!-- Product Name -->
          <el-table-column label="Product Name" prop="productName" min-width="180">
            <template slot-scope="scope">
              <el-tooltip class="item" effect="dark" :content="String(scope.row.productName)" placement="top">
                <span class="ellipsis-text">{{ scope.row.productName }}</span>
              </el-tooltip>
            </template>
          </el-table-column>

          <!-- Publish Status -->
          <el-table-column label="Publish Status" prop="publishStatus" min-width="180">
            <template slot-scope="scope">
              <el-tooltip class="item" effect="dark" :content="String(scope.row.publishStatus)" placement="top">
                <span class="ellipsis-text">{{ scope.row.publishStatus }}</span>
              </el-tooltip>
            </template>
          </el-table-column>

          <!-- Lifecycle Status -->
          <el-table-column label="Lifecycle Status" prop="lifecycleStatus" min-width="180">
            <template slot-scope="scope">
              <el-tooltip class="item" effect="dark" :content="String(scope.row.lifecycleStatus)" placement="top">
                <span class="ellipsis-text">{{ scope.row.lifecycleStatus }}</span>
              </el-tooltip>
            </template>
          </el-table-column>

          <!-- Ship Node ID -->
          <el-table-column label="Ship Node ID" prop="shipNodeId" min-width="180">
            <template slot-scope="scope">
              <el-tooltip class="item" effect="dark" :content="String(scope.row.shipNodeId)" placement="top">
                <span class="ellipsis-text">{{ scope.row.shipNodeId }}</span>
              </el-tooltip>
            </template>
          </el-table-column>

          <!-- Ship Node Name -->
          <el-table-column label="Ship Node Name" prop="shipNodeName" min-width="180">
            <template slot-scope="scope">
              <el-tooltip class="item" effect="dark" :content="String(scope.row.shipNodeName)" placement="top">
                <span class="ellipsis-text">{{ scope.row.shipNodeName }}</span>
              </el-tooltip>
            </template>
          </el-table-column>

          <!-- Ship Node Type -->
          <el-table-column label="Ship Node Type" prop="shipNodeType" min-width="180">
            <template slot-scope="scope">
              <el-tooltip class="item" effect="dark" :content="String(scope.row.shipNodeType)" placement="top">
                <span class="ellipsis-text">{{ scope.row.shipNodeType }}</span>
              </el-tooltip>
            </template>
          </el-table-column>

          <!-- Template ID -->
          <el-table-column label="Template ID" prop="templateId" min-width="180">
            <template slot-scope="scope">
              <el-tooltip class="item" effect="dark" :content="String(scope.row.templateId)" placement="top">
                <span class="ellipsis-text">{{ scope.row.templateId }}</span>
              </el-tooltip>
            </template>
          </el-table-column>

          <!-- Template Name -->
          <el-table-column label="Template Name" prop="templateName" min-width="180">
            <template slot-scope="scope">
              <el-tooltip class="item" effect="dark" :content="String(scope.row.templateName)" placement="top">
                <span class="ellipsis-text">{{ scope.row.templateName }}</span>
              </el-tooltip>
            </template>
          </el-table-column>

          <!-- Template Type -->
          <el-table-column label="Template Type" prop="templateType" min-width="180">
            <template slot-scope="scope">
              <el-tooltip class="item" effect="dark" :content="String(scope.row.templateType)" placement="top">
                <span class="ellipsis-text">{{ scope.row.templateType }}</span>
              </el-tooltip>
            </template>
          </el-table-column>

        </el-table>

        <!-- 添加分页 -->
        <pagination v-show="total > 0" :total="total" :page.sync="pagination.pageNum" :limit.sync="pagination.pageSize"
          @pagination="viewDetails" />
      </el-dialog>



      <!-- Shipping Program报告详情弹窗 -->
      <el-dialog :visible.sync="shippingProgramDialogVisible" title="Shipping Program Report Details" width="80%"
        :before-close="handleBeforeClose">
        <el-table :data="itemReportDetails" style="width:100%">

          <!-- SKU -->
          <el-table-column label="SKU" prop="sku" min-width="180">
            <template slot-scope="scope">
              <el-tooltip class="item" effect="dark" :content="String(scope.row.sku)" placement="top">
                <span class="ellipsis-text">{{ scope.row.sku }}</span>
              </el-tooltip>
            </template>
          </el-table-column>

          <!-- Item ID -->
          <el-table-column label="Item ID" prop="itemId" min-width="180">
            <template slot-scope="scope">
              <el-tooltip class="item" effect="dark" :content="String(scope.row.itemId)" placement="top">
                <span class="ellipsis-text">{{ scope.row.itemId }}</span>
              </el-tooltip>
            </template>
          </el-table-column>

          <!-- Product Name -->
          <el-table-column label="Product Name" prop="productName" min-width="180">
            <template slot-scope="scope">
              <el-tooltip class="item" effect="dark" :content="String(scope.row.productName)" placement="top">
                <span class="ellipsis-text">{{ scope.row.productName }}</span>
              </el-tooltip>
            </template>
          </el-table-column>

          <!-- Publish Status -->
          <el-table-column label="Publish Status" prop="publishStatus" min-width="180">
            <template slot-scope="scope">
              <el-tooltip class="item" effect="dark" :content="String(scope.row.publishStatus)" placement="top">
                <span class="ellipsis-text">{{ scope.row.publishStatus }}</span>
              </el-tooltip>
            </template>
          </el-table-column>

          <!-- Lifecycle Status -->
          <el-table-column label="Lifecycle Status" prop="lifecycleStatus" min-width="180">
            <template slot-scope="scope">
              <el-tooltip class="item" effect="dark" :content="String(scope.row.lifecycleStatus)" placement="top">
                <span class="ellipsis-text">{{ scope.row.lifecycleStatus }}</span>
              </el-tooltip>
            </template>
          </el-table-column>

          <!-- Program Participation -->
          <el-table-column label="Program Participation" prop="programParticipation" min-width="180">
            <template slot-scope="scope">
              <el-tooltip class="item" effect="dark" :content="String(scope.row.programParticipation)" placement="top">
                <span class="ellipsis-text">{{ scope.row.programParticipation }}</span>
              </el-tooltip>
            </template>
          </el-table-column>

          <!-- Template ID -->
          <el-table-column label="Template ID" prop="templateId" min-width="180">
            <template slot-scope="scope">
              <el-tooltip class="item" effect="dark" :content="String(scope.row.templateId)" placement="top">
                <span class="ellipsis-text">{{ scope.row.templateId }}</span>
              </el-tooltip>
            </template>
          </el-table-column>

          <!-- Template Type -->
          <el-table-column label="Template Type" prop="templateType" min-width="180">
            <template slot-scope="scope">
              <el-tooltip class="item" effect="dark" :content="String(scope.row.templateType)" placement="top">
                <span class="ellipsis-text">{{ scope.row.templateType }}</span>
              </el-tooltip>
            </template>
          </el-table-column>

          <!-- Coverage Areas -->
          <el-table-column label="Coverage Areas" prop="coverageAreas" min-width="180">
            <template slot-scope="scope">
              <el-tooltip class="item" effect="dark" :content="String(scope.row.coverageAreas)" placement="top">
                <span class="ellipsis-text">{{ scope.row.coverageAreas }}</span>
              </el-tooltip>
            </template>
          </el-table-column>

        </el-table>

        <!-- 添加分页 -->
        <pagination v-show="total > 0" :total="total" :page.sync="pagination.pageNum" :limit.sync="pagination.pageSize"
          @pagination="viewDetails" />
      </el-dialog>


      <!-- Return Overrides报告详情弹窗 -->
      <el-dialog :visible.sync="returnOverridesDialogVisible" title="Return Overrides Report Details" width="80%"
        :before-close="handleBeforeClose">
        <el-table :data="itemReportDetails" style="width:100%">

          <!-- SKU -->
          <el-table-column label="SKU" prop="sku" min-width="180">
            <template slot-scope="scope">
              <el-tooltip class="item" effect="dark" :content="String(scope.row.sku)" placement="top">
                <span class="ellipsis-text">{{ scope.row.sku }}</span>
              </el-tooltip>
            </template>
          </el-table-column>

          <!-- Keep It -->
          <el-table-column label="Keep It" prop="keepIt" min-width="180">
            <template slot-scope="scope">
              <el-tooltip class="item" effect="dark" :content="String(scope.row.keepIt)" placement="top">
                <span class="ellipsis-text">{{ scope.row.keepIt }}</span>
              </el-tooltip>
            </template>
          </el-table-column>

          <!-- Return Restricted -->
          <el-table-column label="Return Restricted" prop="returnRestricted" min-width="180">
            <template slot-scope="scope">
              <el-tooltip class="item" effect="dark" :content="String(scope.row.returnRestricted)" placement="top">
                <span class="ellipsis-text">{{ scope.row.returnRestricted }}</span>
              </el-tooltip>
            </template>
          </el-table-column>

          <!-- Restriction Reason -->
          <el-table-column label="Restriction Reason" prop="restrictionReason" min-width="180">
            <template slot-scope="scope">
              <el-tooltip class="item" effect="dark" :content="String(scope.row.restrictionReason)" placement="top">
                <span class="ellipsis-text">{{ scope.row.restrictionReason }}</span>
              </el-tooltip>
            </template>
          </el-table-column>

          <!-- Return Center Alias -->
          <el-table-column label="Return Center (Alias)" prop="returnCenterAlias" min-width="180">
            <template slot-scope="scope">
              <el-tooltip class="item" effect="dark" :content="String(scope.row.returnCenterAlias)" placement="top">
                <span class="ellipsis-text">{{ scope.row.returnCenterAlias }}</span>
              </el-tooltip>
            </template>
          </el-table-column>

          <!-- Publish Status -->
          <el-table-column label="Publish Status" prop="publishStatus" min-width="180">
            <template slot-scope="scope">
              <el-tooltip class="item" effect="dark" :content="String(scope.row.publishStatus)" placement="top">
                <span class="ellipsis-text">{{ scope.row.publishStatus }}</span>
              </el-tooltip>
            </template>
          </el-table-column>

        </el-table>

        <!-- 添加分页 -->
        <pagination v-show="total > 0" :total="total" :page.sync="pagination.pageNum" :limit.sync="pagination.pageSize"
          @pagination="viewDetails" />
      </el-dialog>



      <!-- promotion报告详情弹窗 -->
      <el-dialog :visible.sync="promotionReportDialogVisible" title="Promotion Report Details" width="80%"
        :before-close="handleBeforeClose">
        <el-table :data="itemReportDetails" style="width:100%">

          <!-- SKU -->
          <el-table-column label="SKU" prop="sku" min-width="180">
            <template slot-scope="scope">
              <el-tooltip class="item" effect="dark" :content="String(scope.row.sku)" placement="top">
                <span class="ellipsis-text">{{ scope.row.sku }}</span>
              </el-tooltip>
            </template>
          </el-table-column>

          <!-- Item ID -->
          <el-table-column label="Item ID" prop="itemId" min-width="180">
            <template slot-scope="scope">
              <el-tooltip class="item" effect="dark" :content="String(scope.row.itemId)" placement="top">
                <span class="ellipsis-text">{{ scope.row.itemId }}</span>
              </el-tooltip>
            </template>
          </el-table-column>

          <!-- Product Name -->
          <el-table-column label="Product Name" prop="productName" min-width="180">
            <template slot-scope="scope">
              <el-tooltip class="item" effect="dark" :content="String(scope.row.productName)" placement="top">
                <span class="ellipsis-text">{{ scope.row.productName }}</span>
              </el-tooltip>
            </template>
          </el-table-column>

          <!-- Product Category -->
          <el-table-column label="Product Category" prop="productCategory" min-width="180">
            <template slot-scope="scope">
              <el-tooltip class="item" effect="dark" :content="String(scope.row.productCategory)" placement="top">
                <span class="ellipsis-text">{{ scope.row.productCategory }}</span>
              </el-tooltip>
            </template>
          </el-table-column>

          <!-- Promo ID -->
          <el-table-column label="Promo ID" prop="promoId" min-width="180">
            <template slot-scope="scope">
              <el-tooltip class="item" effect="dark" :content="String(scope.row.promoId)" placement="top">
                <span class="ellipsis-text">{{ scope.row.promoId }}</span>
              </el-tooltip>
            </template>
          </el-table-column>

          <el-table-column label="Promo Effective Date" prop="promoEffectiveDate" min-width="180">
            <template slot-scope="scope">
              <el-tooltip class="item" effect="dark" :content="String(scope.row.promoEffectiveDate)" placement="top">
                <span class="ellipsis-text">{{ formatDateTime(scope.row, 'promoEffectiveDate',
                  scope.row.promoEffectiveDate) }}</span>
              </el-tooltip>
            </template>
          </el-table-column>

          <!-- Promo Expiration Date -->
          <el-table-column label="Promo Expiration Date" prop="promoExpirationDate" min-width="180">
            <template slot-scope="scope">
              <el-tooltip class="item" effect="dark" :content="String(scope.row.promoExpirationDate)" placement="top">
                <span class="ellipsis-text">{{ formatDateTime(scope.row, 'promoExpirationDate',
                  scope.row.promoExpirationDate) }}</span>
              </el-tooltip>
            </template>
          </el-table-column>


          <!-- Promo Price -->
          <el-table-column label="Promo Price" prop="promoPrice" min-width="180">
            <template slot-scope="scope">
              <el-tooltip class="item" effect="dark" :content="String(scope.row.promoPrice)" placement="top">
                <span class="ellipsis-text">{{ scope.row.promoPrice }}</span>
              </el-tooltip>
            </template>
          </el-table-column>

          <!-- Promo Price Currency -->
          <el-table-column label="Promo Price Currency" prop="promoPriceCurrency" min-width="180">
            <template slot-scope="scope">
              <el-tooltip class="item" effect="dark" :content="String(scope.row.promoPriceCurrency)" placement="top">
                <span class="ellipsis-text">{{ scope.row.promoPriceCurrency }}</span>
              </el-tooltip>
            </template>
          </el-table-column>

          <!-- Comparison Price -->
          <el-table-column label="Comparison Price" prop="comparisonPrice" min-width="180">
            <template slot-scope="scope">
              <el-tooltip class="item" effect="dark" :content="String(scope.row.comparisonPrice)" placement="top">
                <span class="ellipsis-text">{{ scope.row.comparisonPrice }}</span>
              </el-tooltip>
            </template>
          </el-table-column>

          <!-- Comparison Price Currency -->
          <el-table-column label="Comparison Price Currency" prop="comparisonPriceCurrency" min-width="180">
            <template slot-scope="scope">
              <el-tooltip class="item" effect="dark" :content="String(scope.row.comparisonPriceCurrency)"
                placement="top">
                <span class="ellipsis-text">{{ scope.row.comparisonPriceCurrency }}</span>
              </el-tooltip>
            </template>
          </el-table-column>

          <!-- Promo Type -->
          <el-table-column label="Promo Type" prop="promoType" min-width="180">
            <template slot-scope="scope">
              <el-tooltip class="item" effect="dark" :content="String(scope.row.promoType)" placement="top">
                <span class="ellipsis-text">{{ scope.row.promoType }}</span>
              </el-tooltip>
            </template>
          </el-table-column>

          <!-- Promo Status -->
          <el-table-column label="Promo Status" prop="promoStatus" min-width="180">
            <template slot-scope="scope">
              <el-tooltip class="item" effect="dark" :content="String(scope.row.promoStatus)" placement="top">
                <span class="ellipsis-text">{{ scope.row.promoStatus }}</span>
              </el-tooltip>
            </template>
          </el-table-column>

        </el-table>

        <!-- 添加分页 -->
        <pagination v-show="total > 0" :total="total" :page.sync="pagination.pageNum" :limit.sync="pagination.pageSize"
          @pagination="viewDetails" />
      </el-dialog>



      <!-- fitmentMissingAttr报告详情弹窗 -->
      <el-dialog :visible.sync="fitmentMissingAttrDialogVisible" title="Fitment Missing Attribute Report Details"
        :before-close="handleBeforeClose" width="80%">
        <el-table :data="itemReportDetails" style="width:100%">

          <!-- GTIN -->
          <el-table-column label="GTIN" prop="gtin" min-width="180">
            <template slot-scope="scope">
              <el-tooltip class="item" effect="dark" :content="String(scope.row.gtin)" placement="top">
                <span class="ellipsis-text">{{ scope.row.gtin }}</span>
              </el-tooltip>
            </template>
          </el-table-column>

          <!-- Item ID -->
          <el-table-column label="Item ID" prop="itemId" min-width="180">
            <template slot-scope="scope">
              <el-tooltip class="item" effect="dark" :content="String(scope.row.itemId)" placement="top">
                <span class="ellipsis-text">{{ scope.row.itemId }}</span>
              </el-tooltip>
            </template>
          </el-table-column>

          <!-- Product Name -->
          <el-table-column label="Product Name" prop="productName" min-width="180">
            <template slot-scope="scope">
              <el-tooltip class="item" effect="dark" :content="String(scope.row.productName)" placement="top">
                <span class="ellipsis-text">{{ scope.row.productName }}</span>
              </el-tooltip>
            </template>
          </el-table-column>

          <!-- AAIA Brand ID -->
          <el-table-column label="AAIA Brand ID" prop="aaiaBrandId" min-width="180">
            <template slot-scope="scope">
              <el-tooltip class="item" effect="dark" :content="String(scope.row.aaiaBrandId)" placement="top">
                <span class="ellipsis-text">{{ scope.row.aaiaBrandId }}</span>
              </el-tooltip>
            </template>
          </el-table-column>

          <!-- Manufacturer Part Number -->
          <el-table-column label="Manufacturer Part Number" prop="manufacturerPartNumber" min-width="180">
            <template slot-scope="scope">
              <el-tooltip class="item" effect="dark" :content="String(scope.row.manufacturerPartNumber)"
                placement="top">
                <span class="ellipsis-text">{{ scope.row.manufacturerPartNumber }}</span>
              </el-tooltip>
            </template>
          </el-table-column>

          <!-- Part Terminology Id -->
          <el-table-column label="Part Terminology Id" prop="partTerminologyId" min-width="180">
            <template slot-scope="scope">
              <el-tooltip class="item" effect="dark" :content="String(scope.row.partTerminologyId)" placement="top">
                <span class="ellipsis-text">{{ scope.row.partTerminologyId }}</span>
              </el-tooltip>
            </template>
          </el-table-column>

        </el-table>

        <!-- 添加分页 -->
        <pagination v-show="total > 0" :total="total" :page.sync="pagination.pageNum" :limit.sync="pagination.pageSize"
          @pagination="viewDetails" />
      </el-dialog>



      <!-- fitmentAcesCoverage报告弹窗 -->
      <el-dialog :visible.sync="fitmentAcesCoverageDialogVisible" :before-close="handleBeforeClose"
        title="Fitment Aces Coverage Report Details" width="80%">
        <el-table :data="itemReportDetails" style="width:100%">

          <!-- 全球贸易项目编号 -->
          <el-table-column label="GTIN" prop="gtin" min-width="180">
            <template slot-scope="scope">
              <el-tooltip class="item" effect="dark" :content="String(scope.row.gtin)" placement="top">
                <span class="ellipsis-text">{{ scope.row.gtin }}</span>
              </el-tooltip>
            </template>
          </el-table-column>

          <!-- 商品的唯一标识符 (Item ID) -->
          <el-table-column label="Item ID" prop="itemId" min-width="180">
            <template slot-scope="scope">
              <el-tooltip class="item" effect="dark" :content="String(scope.row.itemId)" placement="top">
                <span class="ellipsis-text">{{ scope.row.itemId }}</span>
              </el-tooltip>
            </template>
          </el-table-column>

          <!-- 商品名称 -->
          <el-table-column label="Product Name" prop="productName" min-width="180">
            <template slot-scope="scope">
              <el-tooltip class="item" effect="dark" :content="String(scope.row.productName)" placement="top">
                <span class="ellipsis-text">{{ scope.row.productName }}</span>
              </el-tooltip>
            </template>
          </el-table-column>

          <!-- AAIA 品牌 ID -->
          <el-table-column label="AAIA Brand ID" prop="aaiaBrandId" min-width="180">
            <template slot-scope="scope">
              <el-tooltip class="item" effect="dark" :content="String(scope.row.aaiaBrandId)" placement="top">
                <span class="ellipsis-text">{{ scope.row.aaiaBrandId }}</span>
              </el-tooltip>
            </template>
          </el-table-column>

          <!-- 制造商零件编号 -->
          <el-table-column label="Manufacturer Part Number" prop="manufacturerPartNumber" min-width="180">
            <template slot-scope="scope">
              <el-tooltip class="item" effect="dark" :content="String(scope.row.manufacturerPartNumber)"
                placement="top">
                <span class="ellipsis-text">{{ scope.row.manufacturerPartNumber }}</span>
              </el-tooltip>
            </template>
          </el-table-column>

          <!-- 部件术语 ID -->
          <el-table-column label="Part Terminology Id" prop="partTerminologyId" min-width="180">
            <template slot-scope="scope">
              <el-tooltip class="item" effect="dark" :content="String(scope.row.partTerminologyId)" placement="top">
                <span class="ellipsis-text">{{ scope.row.partTerminologyId }}</span>
              </el-tooltip>
            </template>
          </el-table-column>

        </el-table>

        <!-- 添加分页 -->
        <pagination v-show="total > 0" :total="total" :page.sync="pagination.pageNum" :limit.sync="pagination.pageSize"
          @pagination="viewDetails" />
      </el-dialog>




      <!-- BuyBox报告详情弹窗 -->
      <el-dialog :visible.sync="buyBoxDialogVisible" title="Buy Box Report Details" width="80%"
        :before-close="handleBeforeClose">
        <el-table :data="itemReportDetails" style="width:100%">

          <!-- SKU -->
          <el-table-column label="SKU" prop="sku" min-width="180">
            <template slot-scope="scope">
              <el-tooltip class="item" effect="dark" :content="String(scope.row.sku)" placement="top">
                <span class="ellipsis-text">{{ scope.row.sku }}</span>
              </el-tooltip>
            </template>
          </el-table-column>

          <!-- Item ID -->
          <el-table-column label="Item ID" prop="itemId" min-width="180">
            <template slot-scope="scope">
              <el-tooltip class="item" effect="dark" :content="String(scope.row.itemId)" placement="top">
                <span class="ellipsis-text">{{ scope.row.itemId }}</span>
              </el-tooltip>
            </template>
          </el-table-column>

          <!-- Product Name -->
          <el-table-column label="Product Name" prop="productName" min-width="180">
            <template slot-scope="scope">
              <el-tooltip class="item" effect="dark" :content="String(scope.row.productName)" placement="top">
                <span class="ellipsis-text">{{ scope.row.productName }}</span>
              </el-tooltip>
            </template>
          </el-table-column>

          <!-- Product Category -->
          <el-table-column label="Product Category" prop="productCategory" min-width="180">
            <template slot-scope="scope">
              <el-tooltip class="item" effect="dark" :content="String(scope.row.productCategory)" placement="top">
                <span class="ellipsis-text">{{ scope.row.productCategory }}</span>
              </el-tooltip>
            </template>
          </el-table-column>

          <!-- Seller Item Price -->
          <el-table-column label="Seller Item Price" prop="sellerItemPrice" min-width="180">
            <template slot-scope="scope">
              <el-tooltip class="item" effect="dark" :content="String(scope.row.sellerItemPrice)" placement="top">
                <span class="ellipsis-text">{{ scope.row.sellerItemPrice }}</span>
              </el-tooltip>
            </template>
          </el-table-column>

          <!-- Seller Ship Price -->
          <el-table-column label="Seller Ship Price" prop="sellerShipPrice" min-width="180">
            <template slot-scope="scope">
              <el-tooltip class="item" effect="dark" :content="String(scope.row.sellerShipPrice)" placement="top">
                <span class="ellipsis-text">{{ scope.row.sellerShipPrice }}</span>
              </el-tooltip>
            </template>
          </el-table-column>

          <!-- Is Seller BuyBox Winner -->
          <el-table-column label="Is Seller BuyBox Winner" prop="isSellerBuyBoxWinner" min-width="180">
            <template slot-scope="scope">
              <el-tooltip class="item" effect="dark" :content="String(scope.row.isSellerBuyBoxWinner)" placement="top">
                <span class="ellipsis-text">{{ scope.row.isSellerBuyBoxWinner }}</span>
              </el-tooltip>
            </template>
          </el-table-column>

          <!-- Buybox Item Price -->
          <el-table-column label="Buybox Item Price" prop="buyboxItemPrice" min-width="180">
            <template slot-scope="scope">
              <el-tooltip class="item" effect="dark" :content="String(scope.row.buyboxItemPrice)" placement="top">
                <span class="ellipsis-text">{{ scope.row.buyboxItemPrice }}</span>
              </el-tooltip>
            </template>
          </el-table-column>

          <!-- Buybox Ship Price -->
          <el-table-column label="Buybox Ship Price" prop="buyboxShipPrice" min-width="180">
            <template slot-scope="scope">
              <el-tooltip class="item" effect="dark" :content="String(scope.row.buyboxShipPrice)" placement="top">
                <span class="ellipsis-text">{{ scope.row.buyboxShipPrice }}</span>
              </el-tooltip>
            </template>
          </el-table-column>

        </el-table>

        <!-- 添加分页 -->
        <pagination v-show="total > 0" :total="total" :page.sync="pagination.pageNum" :limit.sync="pagination.pageSize"
          @pagination="viewDetails" />
      </el-dialog>



      <!-- LagTime报告弹窗 -->
      <el-dialog :visible.sync="LagTimeDialogVisible" title="Inventory Report Details" width="80%"
        :before-close="handleBeforeClose">
        <el-table :data="itemReportDetails" style="width:100%">

          <!-- 商品 SKU -->
          <el-table-column label="SKU" prop="sku" min-width="180">
            <template slot-scope="scope">
              <el-tooltip class="item" effect="dark" :content="String(scope.row.sku)" placement="top">
                <span class="ellipsis-text">{{ scope.row.sku }}</span>
              </el-tooltip>
            </template>
          </el-table-column>

          <!-- 商品 GTIN -->
          <el-table-column label="GTIN" prop="gtin" min-width="180">
            <template slot-scope="scope">
              <el-tooltip class="item" effect="dark" :content="String(scope.row.gtin)" placement="top">
                <span class="ellipsis-text">{{ scope.row.gtin }}</span>
              </el-tooltip>
            </template>
          </el-table-column>

          <!-- 商品名称 -->
          <el-table-column label="Product Name" prop="productName" min-width="180">
            <template slot-scope="scope">
              <el-tooltip class="item" effect="dark" :content="String(scope.row.productName)" placement="top">
                <span class="ellipsis-text">{{ scope.row.productName }}</span>
              </el-tooltip>
            </template>
          </el-table-column>

          <!-- 商品类别 -->
          <el-table-column label="Category" prop="category" min-width="180">
            <template slot-scope="scope">
              <el-tooltip class="item" effect="dark" :content="String(scope.row.category)" placement="top">
                <span class="ellipsis-text">{{ scope.row.category }}</span>
              </el-tooltip>
            </template>
          </el-table-column>

          <!-- 商品的履行延迟时间 -->
          <el-table-column label="Fulfillment Lag Time" prop="fulfillmentLagTime" min-width="180">
            <template slot-scope="scope">
              <el-tooltip class="item" effect="dark" :content="String(scope.row.fulfillmentLagTime)" placement="top">
                <span class="ellipsis-text">{{ scope.row.fulfillmentLagTime }}</span>
              </el-tooltip>
            </template>
          </el-table-column>

        </el-table>

        <!-- 添加分页 -->
        <pagination v-show="total > 0" :total="total" :page.sync="pagination.pageNum" :limit.sync="pagination.pageSize"
          @pagination="viewDetails" />
      </el-dialog>


      <!-- assortmentRecommendations报告弹窗 -->
      <el-dialog :visible.sync="assortmentRecommendationslogVisible" title="Assortment Recommendations Report Details"
        width="80%" :before-close="handleBeforeClose">
        <el-table :data="itemReportDetails" style="width:100%">

          <!-- Item Recommendation Unique Id -->
          <el-table-column label="Item Recommendation Unique Id" prop="itemRecommendationUniqueId" min-width="180">
            <template slot-scope="scope">
              <el-tooltip class="item" effect="dark" :content="String(scope.row.itemRecommendationUniqueId)"
                placement="top">
                <span class="ellipsis-text">{{ scope.row.itemRecommendationUniqueId }}</span>
              </el-tooltip>
            </template>
          </el-table-column>

          <!-- Item Name -->
          <el-table-column label="Item Name" prop="itemName" min-width="180">
            <template slot-scope="scope">
              <el-tooltip class="item" effect="dark" :content="String(scope.row.itemName)" placement="top">
                <span class="ellipsis-text">{{ scope.row.itemName }}</span>
              </el-tooltip>
            </template>
          </el-table-column>

          <!-- Brand -->
          <el-table-column label="Brand" prop="brand" min-width="180">
            <template slot-scope="scope">
              <el-tooltip class="item" effect="dark" :content="String(scope.row.brand)" placement="top">
                <span class="ellipsis-text">{{ scope.row.brand }}</span>
              </el-tooltip>
            </template>
          </el-table-column>

          <!-- Category -->
          <el-table-column label="Category" prop="category" min-width="180">
            <template slot-scope="scope">
              <el-tooltip class="item" effect="dark" :content="String(scope.row.category)" placement="top">
                <span class="ellipsis-text">{{ scope.row.category }}</span>
              </el-tooltip>
            </template>
          </el-table-column>

          <!-- Price Currency -->
          <el-table-column label="Price Currency" prop="priceCurrency" min-width="180">
            <template slot-scope="scope">
              <el-tooltip class="item" effect="dark" :content="String(scope.row.priceCurrency)" placement="top">
                <span class="ellipsis-text">{{ scope.row.priceCurrency }}</span>
              </el-tooltip>
            </template>
          </el-table-column>

          <!-- Item Availability Status -->
          <el-table-column label="Item Availability Status" prop="itemAvailabilityStatus" min-width="180">
            <template slot-scope="scope">
              <el-tooltip class="item" effect="dark" :content="String(scope.row.itemAvailabilityStatus)"
                placement="top">
                <span class="ellipsis-text">{{ scope.row.itemAvailabilityStatus }}</span>
              </el-tooltip>
            </template>
          </el-table-column>

          <!-- GTIN -->
          <el-table-column label="GTIN" prop="gtin" min-width="180">
            <template slot-scope="scope">
              <el-tooltip class="item" effect="dark" :content="String(scope.row.gtin)" placement="top">
                <span class="ellipsis-text">{{ scope.row.gtin }}</span>
              </el-tooltip>
            </template>
          </el-table-column>

          <!-- UPC -->
          <el-table-column label="UPC" prop="upc" min-width="180">
            <template slot-scope="scope">
              <el-tooltip class="item" effect="dark" :content="String(scope.row.upc)" placement="top">
                <span class="ellipsis-text">{{ scope.row.upc }}</span>
              </el-tooltip>
            </template>
          </el-table-column>

          <!-- ISBN -->
          <el-table-column label="ISBN" prop="isbn" min-width="180">
            <template slot-scope="scope">
              <el-tooltip class="item" effect="dark" :content="String(scope.row.isbn)" placement="top">
                <span class="ellipsis-text">{{ scope.row.isbn }}</span>
              </el-tooltip>
            </template>
          </el-table-column>

          <!-- EAN -->
          <el-table-column label="EAN" prop="ean" min-width="180">
            <template slot-scope="scope">
              <el-tooltip class="item" effect="dark" :content="String(scope.row.ean)" placement="top">
                <span class="ellipsis-text">{{ scope.row.ean }}</span>
              </el-tooltip>
            </template>
          </el-table-column>

          <!-- Walmart Item Id -->
          <el-table-column label="Walmart Item Id" prop="walmartItemId" min-width="180">
            <template slot-scope="scope">
              <el-tooltip class="item" effect="dark" :content="String(scope.row.walmartItemId)" placement="top">
                <span class="ellipsis-text">{{ scope.row.walmartItemId }}</span>
              </el-tooltip>
            </template>
          </el-table-column>

          <!-- Walmart URL -->
          <el-table-column label="Walmart URL" prop="walmartUrl" min-width="180">
            <template slot-scope="scope">
              <el-tooltip class="item" effect="dark" :content="String(scope.row.walmartUrl)" placement="top">
                <span class="ellipsis-text">{{ scope.row.walmartUrl }}</span>
              </el-tooltip>
            </template>
          </el-table-column>

          <!-- Walmart Item Price -->
          <el-table-column label="Walmart Item Price" prop="walmartItemPrice" min-width="180">
            <template slot-scope="scope">
              <el-tooltip class="item" effect="dark" :content="String(scope.row.walmartItemPrice)" placement="top">
                <span class="ellipsis-text">{{ scope.row.walmartItemPrice }}</span>
              </el-tooltip>
            </template>
          </el-table-column>

          <!-- Walmart Shipping Price -->
          <el-table-column label="Walmart Shipping Price" prop="walmartShippingPrice" min-width="180">
            <template slot-scope="scope">
              <el-tooltip class="item" effect="dark" :content="String(scope.row.walmartShippingPrice)" placement="top">
                <span class="ellipsis-text">{{ scope.row.walmartShippingPrice }}</span>
              </el-tooltip>
            </template>
          </el-table-column>

          <!-- Walmart Total Price -->
          <el-table-column label="Walmart Total Price" prop="walmartTotalPrice" min-width="180">
            <template slot-scope="scope">
              <el-tooltip class="item" effect="dark" :content="String(scope.row.walmartTotalPrice)" placement="top">
                <span class="ellipsis-text">{{ scope.row.walmartTotalPrice }}</span>
              </el-tooltip>
            </template>
          </el-table-column>

          <!-- WFS Indicator -->
          <el-table-column label="WFS Indicator" prop="wfsIndicator" min-width="180">
            <template slot-scope="scope">
              <el-tooltip class="item" effect="dark" :content="String(scope.row.wfsIndicator)" placement="top">
                <span class="ellipsis-text">{{ scope.row.wfsIndicator }}</span>
              </el-tooltip>
            </template>
          </el-table-column>

          <!-- Competitor Item Id -->
          <el-table-column label="Competitor Item Id" prop="competitorItemId" min-width="180">
            <template slot-scope="scope">
              <el-tooltip class="item" effect="dark" :content="String(scope.row.competitorItemId)" placement="top">
                <span class="ellipsis-text">{{ scope.row.competitorItemId }}</span>
              </el-tooltip>
            </template>
          </el-table-column>

          <!-- Competitor URL -->
          <el-table-column label="Competitor URL" prop="competitorUrl" min-width="180">
            <template slot-scope="scope">
              <el-tooltip class="item" effect="dark" :content="String(scope.row.competitorUrl)" placement="top">
                <span class="ellipsis-text">{{ scope.row.competitorUrl }}</span>
              </el-tooltip>
            </template>
          </el-table-column>

          <!-- Competitor Item Price -->
          <el-table-column label="Competitor Item Price" prop="competitorItemPrice" min-width="180">
            <template slot-scope="scope">
              <el-tooltip class="item" effect="dark" :content="String(scope.row.competitorItemPrice)" placement="top">
                <span class="ellipsis-text">{{ scope.row.competitorItemPrice }}</span>
              </el-tooltip>
            </template>
          </el-table-column>

          <!-- Competitor Shipping Price -->
          <el-table-column label="Competitor Shipping Price" prop="competitorShippingPrice" min-width="180">
            <template slot-scope="scope">
              <el-tooltip class="item" effect="dark" :content="String(scope.row.competitorShippingPrice)"
                placement="top">
                <span class="ellipsis-text">{{ scope.row.competitorShippingPrice }}</span>
              </el-tooltip>
            </template>
          </el-table-column>

          <!-- Competitor Total Price -->
          <el-table-column label="Competitor Total Price" prop="competitorTotalPrice" min-width="180">
            <template slot-scope="scope">
              <el-tooltip class="item" effect="dark" :content="String(scope.row.competitorTotalPrice)" placement="top">
                <span class="ellipsis-text">{{ scope.row.competitorTotalPrice }}</span>
              </el-tooltip>
            </template>
          </el-table-column>

          <!-- Potential Sales -->
          <el-table-column label="Potential Sales" prop="potentialSales" min-width="180">
            <template slot-scope="scope">
              <el-tooltip class="item" effect="dark" :content="String(scope.row.potentialSales)" placement="top">
                <span class="ellipsis-text">{{ scope.row.potentialSales }}</span>
              </el-tooltip>
            </template>
          </el-table-column>

          <!-- Shopping Trends -->
          <el-table-column label="Shopping Trends" prop="shoppingTrends" min-width="180">
            <template slot-scope="scope">
              <el-tooltip class="item" effect="dark" :content="String(scope.row.shoppingTrends)" placement="top">
                <span class="ellipsis-text">{{ scope.row.shoppingTrends }}</span>
              </el-tooltip>
            </template>
          </el-table-column>

          <!-- Product Type -->
          <el-table-column label="Product Type" prop="productType" min-width="180">
            <template slot-scope="scope">
              <el-tooltip class="item" effect="dark" :content="String(scope.row.productType)" placement="top">
                <span class="ellipsis-text">{{ scope.row.productType }}</span>
              </el-tooltip>
            </template>
          </el-table-column>

          <!-- Potential Sales Rank -->
          <el-table-column label="Potential Sales Rank" prop="potentialSalesRank" min-width="180">
            <template slot-scope="scope">
              <el-tooltip class="item" effect="dark" :content="String(scope.row.potentialSalesRank)" placement="top">
                <span class="ellipsis-text">{{ scope.row.potentialSalesRank }}</span>
              </el-tooltip>
            </template>
          </el-table-column>

          <!-- Demand Sales Trends -->
          <el-table-column label="Demand Sales Trends" prop="demandSalesTrends" min-width="180">
            <template slot-scope="scope">
              <el-tooltip class="item" effect="dark" :content="String(scope.row.demandSalesTrends)" placement="top">
                <span class="ellipsis-text">{{ scope.row.demandSalesTrends }}</span>
              </el-tooltip>
            </template>
          </el-table-column>

          <!-- Weekly Demand Trends -->
          <el-table-column label="Weekly Demand Trends" prop="weeklyDemandTrends" min-width="180">
            <template slot-scope="scope">
              <el-tooltip class="item" effect="dark" :content="String(scope.row.weeklyDemandTrends)" placement="top">
                <span class="ellipsis-text">{{ scope.row.weeklyDemandTrends }}</span>
              </el-tooltip>
            </template>
          </el-table-column>

          <!-- Monthly Demand Trends -->
          <el-table-column label="Monthly Demand Trends" prop="monthlyDemandTrends" min-width="180">
            <template slot-scope="scope">
              <el-tooltip class="item" effect="dark" :content="String(scope.row.monthlyDemandTrends)" placement="top">
                <span class="ellipsis-text">{{ scope.row.monthlyDemandTrends }}</span>
              </el-tooltip>
            </template>
          </el-table-column>

          <!-- No. of Offers -->
          <el-table-column label="No. of Offers" prop="noOfOffers" min-width="180">
            <template slot-scope="scope">
              <el-tooltip class="item" effect="dark" :content="String(scope.row.noOfOffers)" placement="top">
                <span class="ellipsis-text">{{ scope.row.noOfOffers }}</span>
              </el-tooltip>
            </template>
          </el-table-column>

          <!-- Search Keywords -->
          <el-table-column label="Search Keywords" prop="searchKeywords" min-width="180">
            <template slot-scope="scope">
              <el-tooltip class="item" effect="dark" :content="String(scope.row.searchKeywords)" placement="top">
                <span class="ellipsis-text">{{ scope.row.searchKeywords }}</span>
              </el-tooltip>
            </template>
          </el-table-column>

          <!-- Weekly Price Trends -->
          <el-table-column label="Weekly Price Trends" prop="weeklyPriceTrends" min-width="180">
            <template slot-scope="scope">
              <el-tooltip class="item" effect="dark" :content="String(scope.row.weeklyPriceTrends)" placement="top">
                <span class="ellipsis-text">{{ scope.row.weeklyPriceTrends }}</span>
              </el-tooltip>
            </template>
          </el-table-column>

          <!-- Monthly Price Trends -->
          <el-table-column label="Monthly Price Trends" prop="monthlyPriceTrends" min-width="180">
            <template slot-scope="scope">
              <el-tooltip class="item" effect="dark" :content="String(scope.row.monthlyPriceTrends)" placement="top">
                <span class="ellipsis-text">{{ scope.row.monthlyPriceTrends }}</span>
              </el-tooltip>
            </template>
          </el-table-column>

          <!-- Item Free Shipping -->
          <el-table-column label="Item Free Shipping" prop="itemFreeShipping" min-width="180">
            <template slot-scope="scope">
              <el-tooltip class="item" effect="dark" :content="String(scope.row.itemFreeShipping)" placement="top">
                <span class="ellipsis-text">{{ scope.row.itemFreeShipping }}</span>
              </el-tooltip>
            </template>
          </el-table-column>

          <!-- Ratings -->
          <el-table-column label="Ratings" prop="ratings" min-width="180">
            <template slot-scope="scope">
              <el-tooltip class="item" effect="dark" :content="String(scope.row.ratings)" placement="top">
                <span class="ellipsis-text">{{ scope.row.ratings }}</span>
              </el-tooltip>
            </template>
          </el-table-column>

          <!-- No. of Ratings -->
          <el-table-column label="No. of Ratings" prop="noOfRatings" min-width="180">
            <template slot-scope="scope">
              <el-tooltip class="item" effect="dark" :content="String(scope.row.noOfRatings)" placement="top">
                <span class="ellipsis-text">{{ scope.row.noOfRatings }}</span>
              </el-tooltip>
            </template>
          </el-table-column>

          <!-- Primary Variant Item ID -->
          <el-table-column label="Primary Variant Item ID" prop="primaryVariantItemId" min-width="180">
            <template slot-scope="scope">
              <el-tooltip class="item" effect="dark" :content="String(scope.row.primaryVariantItemId)" placement="top">
                <span class="ellipsis-text">{{ scope.row.primaryVariantItemId }}</span>
              </el-tooltip>
            </template>
          </el-table-column>

          <!-- Variant Type -->
          <el-table-column label="Variant Type" prop="variantType" min-width="180">
            <template slot-scope="scope">
              <el-tooltip class="item" effect="dark" :content="String(scope.row.variantType)" placement="top">
                <span class="ellipsis-text">{{ scope.row.variantType }}</span>
              </el-tooltip>
            </template>
          </el-table-column>

        </el-table>

        <!-- 添加分页 -->
        <pagination v-show="total > 0" :total="total" :page.sync="pagination.pageNum" :limit.sync="pagination.pageSize"
          @pagination="viewDetails" />
      </el-dialog>



      <!-- cancellation报告弹窗 -->
      <el-dialog :visible.sync="cancellationReportDialogVisible" title="Cancellation Report Details" width="80%"
        :before-close="handleBeforeClose">
        <el-table :data="itemReportDetails" style="width:100%">

          <!-- 订单放置日期 -->
          <el-table-column label="Order Placed Date" prop="orderPlacedDt" min-width="180">
            <template slot-scope="scope">
              <el-tooltip class="item" effect="dark" :content="String(scope.row.orderPlacedDt)" placement="top">
                <span class="ellipsis-text">{{ scope.row.orderPlacedDt }}</span>
              </el-tooltip>
            </template>
          </el-table-column>

          <!-- 实际交付日期 -->
          <el-table-column label="Actual Delivery Date" prop="actualDeliveryDate" min-width="180">
            <template slot-scope="scope">
              <el-tooltip class="item" effect="dark" :content="String(scope.row.actualDeliveryDate)" placement="top">
                <span class="ellipsis-text">{{ scope.row.actualDeliveryDate }}</span>
              </el-tooltip>
            </template>
          </el-table-column>

          <!-- 取消日期 -->
          <el-table-column label="Cancel Date" prop="cancelDate" min-width="180">
            <template slot-scope="scope">
              <el-tooltip class="item" effect="dark" :content="String(scope.row.cancelDate)" placement="top">
                <span class="ellipsis-text">{{ scope.row.cancelDate }}</span>
              </el-tooltip>
            </template>
          </el-table-column>

          <!-- 目的地州 -->
          <el-table-column label="Destination State" prop="destinationState" min-width="180">
            <template slot-scope="scope">
              <el-tooltip class="item" effect="dark" :content="String(scope.row.destinationState)" placement="top">
                <span class="ellipsis-text">{{ scope.row.destinationState }}</span>
              </el-tooltip>
            </template>
          </el-table-column>

          <!-- 预计交付日期 -->
          <el-table-column label="Estimated Delivery Date" prop="estimatedDeliveryDate" min-width="180">
            <template slot-scope="scope">
              <el-tooltip class="item" effect="dark" :content="String(scope.row.estimatedDeliveryDate)" placement="top">
                <span class="ellipsis-text">{{ scope.row.estimatedDeliveryDate }}</span>
              </el-tooltip>
            </template>
          </el-table-column>

          <!-- 销售订单号 -->
          <el-table-column label="Sales Order" prop="salesOrder" min-width="180">
            <template slot-scope="scope">
              <el-tooltip class="item" effect="dark" :content="String(scope.row.salesOrder)" placement="top">
                <span class="ellipsis-text">{{ scope.row.salesOrder }}</span>
              </el-tooltip>
            </template>
          </el-table-column>

          <!-- 退货日期 -->
          <el-table-column label="Return Date" prop="returnDate" min-width="180">
            <template slot-scope="scope">
              <el-tooltip class="item" effect="dark" :content="String(scope.row.returnDate)" placement="top">
                <span class="ellipsis-text">{{ scope.row.returnDate }}</span>
              </el-tooltip>
            </template>
          </el-table-column>

          <!-- 跟踪号 -->
          <el-table-column label="Tracking Number" prop="trackingNum" min-width="180">
            <template slot-scope="scope">
              <el-tooltip class="item" effect="dark" :content="String(scope.row.trackingNum)" placement="top">
                <span class="ellipsis-text">{{ scope.row.trackingNum }}</span>
              </el-tooltip>
            </template>
          </el-table-column>

          <!-- 承运人 -->
          <el-table-column label="Carrier" prop="carrier" min-width="180">
            <template slot-scope="scope">
              <el-tooltip class="item" effect="dark" :content="String(scope.row.carrier)" placement="top">
                <span class="ellipsis-text">{{ scope.row.carrier }}</span>
              </el-tooltip>
            </template>
          </el-table-column>

          <!-- 产品目录项ID -->
          <el-table-column label="Catalog Item ID" prop="catlgItemId" min-width="180">
            <template slot-scope="scope">
              <el-tooltip class="item" effect="dark" :content="String(scope.row.catlgItemId)" placement="top">
                <span class="ellipsis-text">{{ scope.row.catlgItemId }}</span>
              </el-tooltip>
            </template>
          </el-table-column>

          <!-- 退货原因 -->
          <el-table-column label="Return Reason" prop="returnReason" min-width="180">
            <template slot-scope="scope">
              <el-tooltip class="item" effect="dark" :content="String(scope.row.returnReason)" placement="top">
                <span class="ellipsis-text">{{ scope.row.returnReason }}</span>
              </el-tooltip>
            </template>
          </el-table-column>

          <!-- 提供商ID -->
          <el-table-column label="Offer ID" prop="offerId" min-width="180">
            <template slot-scope="scope">
              <el-tooltip class="item" effect="dark" :content="String(scope.row.offerId)" placement="top">
                <span class="ellipsis-text">{{ scope.row.offerId }}</span>
              </el-tooltip>
            </template>
          </el-table-column>

          <!-- 采购订单号 -->
          <el-table-column label="PO Number" prop="poNum" min-width="180">
            <template slot-scope="scope">
              <el-tooltip class="item" effect="dark" :content="String(scope.row.poNum)" placement="top">
                <span class="ellipsis-text">{{ scope.row.poNum }}</span>
              </el-tooltip>
            </template>
          </el-table-column>

          <!-- 卖家ID -->
          <el-table-column label="Seller ID" prop="legacySlrId" min-width="180">
            <template slot-scope="scope">
              <el-tooltip class="item" effect="dark" :content="String(scope.row.legacySlrId)" placement="top">
                <span class="ellipsis-text">{{ scope.row.legacySlrId }}</span>
              </el-tooltip>
            </template>
          </el-table-column>

          <!-- 缺陷类型 -->
          <el-table-column label="Defect Type" prop="defectType" min-width="180">
            <template slot-scope="scope">
              <el-tooltip class="item" effect="dark" :content="String(scope.row.defectType)" placement="top">
                <span class="ellipsis-text">{{ scope.row.defectType }}</span>
              </el-tooltip>
            </template>
          </el-table-column>

          <!-- 取消原因 -->
          <el-table-column label="Cancel Reason" prop="cancelReason" min-width="180">
            <template slot-scope="scope">
              <el-tooltip class="item" effect="dark" :content="String(scope.row.cancelReason)" placement="top">
                <span class="ellipsis-text">{{ scope.row.cancelReason }}</span>
              </el-tooltip>
            </template>
          </el-table-column>

        </el-table>

        <!-- 添加分页 -->
        <pagination v-show="total > 0" :total="total" :page.sync="pagination.pageNum" :limit.sync="pagination.pageSize"
          @pagination="viewDetails" />
      </el-dialog>



      <!-- Cpa报告相关弹窗 -->
      <el-dialog :visible.sync="CpaDialogVisible" title="CPA Report Details" width="80%"
        :before-close="handleBeforeClose">
        <el-table :data="itemReportDetails" style="width:100%">

          <!-- SKU -->
          <el-table-column label="SKU" prop="sku" min-width="180">
            <template slot-scope="scope">
              <el-tooltip class="item" effect="dark" :content="String(scope.row.sku)" placement="top">
                <span class="ellipsis-text">{{ scope.row.sku }}</span>
              </el-tooltip>
            </template>
          </el-table-column>

          <!-- SKU OPT IN -->
          <el-table-column label="SKU OPT IN" prop="skuOptIn" min-width="180">
            <template slot-scope="scope">
              <el-tooltip class="item" effect="dark" :content="String(scope.row.skuOptIn)" placement="top">
                <span class="ellipsis-text">{{ scope.row.skuOptIn }}</span>
              </el-tooltip>
            </template>
          </el-table-column>

          <!-- 商品名称 -->
          <el-table-column label="Product Name" prop="productName" min-width="180">
            <template slot-scope="scope">
              <el-tooltip class="item" effect="dark" :content="String(scope.row.productName)" placement="top">
                <span class="ellipsis-text">{{ scope.row.productName }}</span>
              </el-tooltip>
            </template>
          </el-table-column>

          <!-- 货币 -->
          <el-table-column label="Currency" prop="currency" min-width="180">
            <template slot-scope="scope">
              <el-tooltip class="item" effect="dark" :content="String(scope.row.currency)" placement="top">
                <span class="ellipsis-text">{{ scope.row.currency }}</span>
              </el-tooltip>
            </template>
          </el-table-column>

          <!-- 价格 -->
          <el-table-column label="Price" prop="price" min-width="180">
            <template slot-scope="scope">
              <el-tooltip class="item" effect="dark" :content="String(scope.row.price)" placement="top">
                <span class="ellipsis-text">{{ scope.row.price }}</span>
              </el-tooltip>
            </template>
          </el-table-column>

          <!-- 运费 -->
          <el-table-column label="Ship Price" prop="shipPrice" min-width="180">
            <template slot-scope="scope">
              <el-tooltip class="item" effect="dark" :content="String(scope.row.shipPrice)" placement="top">
                <span class="ellipsis-text">{{ scope.row.shipPrice }}</span>
              </el-tooltip>
            </template>
          </el-table-column>
        </el-table>

        <!-- 添加分页 -->
        <pagination v-show="total > 0" :total="total" :page.sync="pagination.pageNum" :limit.sync="pagination.pageSize"
          @pagination="viewDetails" />
      </el-dialog>


      <!-- Delivery Defect报告弹窗 -->
      <el-dialog :visible.sync="deliveryDefectReportDialogVisible" title="Delivery Defect Report Details" width="80%"
        :before-close="handleBeforeClose">
        <el-table :data="itemReportDetails" style="width:100%">

          <!-- 订单下单日期 -->
          <el-table-column label="Order Placed Date" prop="orderPlacedDt" min-width="180">
            <template slot-scope="scope">
              <el-tooltip class="item" effect="dark" :content="String(scope.row.orderPlacedDt)" placement="top">
                <span class="ellipsis-text">{{ scope.row.orderPlacedDt }}</span>
              </el-tooltip>
            </template>
          </el-table-column>

          <!-- 实际交货日期 -->
          <el-table-column label="Actual Delivery Date" prop="actualDeliveryDate" min-width="180">
            <template slot-scope="scope">
              <el-tooltip class="item" effect="dark" :content="String(scope.row.actualDeliveryDate)" placement="top">
                <span class="ellipsis-text">{{ scope.row.actualDeliveryDate }}</span>
              </el-tooltip>
            </template>
          </el-table-column>

          <!-- 取消日期 -->
          <el-table-column label="Cancel Date" prop="cancelDate" min-width="180">
            <template slot-scope="scope">
              <el-tooltip class="item" effect="dark" :content="String(scope.row.cancelDate)" placement="top">
                <span class="ellipsis-text">{{ scope.row.cancelDate }}</span>
              </el-tooltip>
            </template>
          </el-table-column>

          <!-- 目的地州 -->
          <el-table-column label="Destination State" prop="destinationState" min-width="180">
            <template slot-scope="scope">
              <el-tooltip class="item" effect="dark" :content="String(scope.row.destinationState)" placement="top">
                <span class="ellipsis-text">{{ scope.row.destinationState }}</span>
              </el-tooltip>
            </template>
          </el-table-column>

          <!-- 预计交货日期 -->
          <el-table-column label="Estimated Delivery Date" prop="estimatedDeliveryDate" min-width="180">
            <template slot-scope="scope">
              <el-tooltip class="item" effect="dark" :content="String(scope.row.estimatedDeliveryDate)" placement="top">
                <span class="ellipsis-text">{{ scope.row.estimatedDeliveryDate }}</span>
              </el-tooltip>
            </template>
          </el-table-column>

          <!-- 销售订单号 -->
          <el-table-column label="Sales Order" prop="salesOrder" min-width="180">
            <template slot-scope="scope">
              <el-tooltip class="item" effect="dark" :content="String(scope.row.salesOrder)" placement="top">
                <span class="ellipsis-text">{{ scope.row.salesOrder }}</span>
              </el-tooltip>
            </template>
          </el-table-column>

          <!-- 退货日期 -->
          <el-table-column label="Return Date" prop="returnDate" min-width="180">
            <template slot-scope="scope">
              <el-tooltip class="item" effect="dark" :content="String(scope.row.returnDate)" placement="top">
                <span class="ellipsis-text">{{ scope.row.returnDate }}</span>
              </el-tooltip>
            </template>
          </el-table-column>

          <!-- 追踪号 -->
          <el-table-column label="Tracking Number" prop="trackingNum" min-width="180">
            <template slot-scope="scope">
              <el-tooltip class="item" effect="dark" :content="String(scope.row.trackingNum)" placement="top">
                <span class="ellipsis-text">{{ scope.row.trackingNum }}</span>
              </el-tooltip>
            </template>
          </el-table-column>

          <!-- 承运人 -->
          <el-table-column label="Carrier" prop="carrier" min-width="180">
            <template slot-scope="scope">
              <el-tooltip class="item" effect="dark" :content="String(scope.row.carrier)" placement="top">
                <span class="ellipsis-text">{{ scope.row.carrier }}</span>
              </el-tooltip>
            </template>
          </el-table-column>

          <!-- 商品目录ID -->
          <el-table-column label="Catalog Item ID" prop="catlgItemId" min-width="180">
            <template slot-scope="scope">
              <el-tooltip class="item" effect="dark" :content="String(scope.row.catlgItemId)" placement="top">
                <span class="ellipsis-text">{{ scope.row.catlgItemId }}</span>
              </el-tooltip>
            </template>
          </el-table-column>

          <!-- 退货原因 -->
          <el-table-column label="Return Reason" prop="returnReason" min-width="180">
            <template slot-scope="scope">
              <el-tooltip class="item" effect="dark" :content="String(scope.row.returnReason)" placement="top">
                <span class="ellipsis-text">{{ scope.row.returnReason }}</span>
              </el-tooltip>
            </template>
          </el-table-column>

          <!-- 促销ID -->
          <el-table-column label="Offer ID" prop="offerId" min-width="180">
            <template slot-scope="scope">
              <el-tooltip class="item" effect="dark" :content="String(scope.row.offerId)" placement="top">
                <span class="ellipsis-text">{{ scope.row.offerId }}</span>
              </el-tooltip>
            </template>
          </el-table-column>

          <!-- 采购订单号 -->
          <el-table-column label="PO Number" prop="poNum" min-width="180">
            <template slot-scope="scope">
              <el-tooltip class="item" effect="dark" :content="String(scope.row.poNum)" placement="top">
                <span class="ellipsis-text">{{ scope.row.poNum }}</span>
              </el-tooltip>
            </template>
          </el-table-column>

          <!-- 旧卖家ID -->
          <el-table-column label="Legacy Seller ID" prop="legacySlrId" min-width="180">
            <template slot-scope="scope">
              <el-tooltip class="item" effect="dark" :content="String(scope.row.legacySlrId)" placement="top">
                <span class="ellipsis-text">{{ scope.row.legacySlrId }}</span>
              </el-tooltip>
            </template>
          </el-table-column>

          <!-- 缺陷类型 -->
          <el-table-column label="Defect Type" prop="defectType" min-width="180">
            <template slot-scope="scope">
              <el-tooltip class="item" effect="dark" :content="String(scope.row.defectType)" placement="top">
                <span class="ellipsis-text">{{ scope.row.defectType }}</span>
              </el-tooltip>
            </template>
          </el-table-column>

          <!-- 取消原因 -->
          <el-table-column label="Cancel Reason" prop="cancelReason" min-width="180">
            <template slot-scope="scope">
              <el-tooltip class="item" effect="dark" :content="String(scope.row.cancelReason)" placement="top">
                <span class="ellipsis-text">{{ scope.row.cancelReason }}</span>
              </el-tooltip>
            </template>
          </el-table-column>

        </el-table>

        <!-- 添加分页 -->
        <pagination v-show="total > 0" :total="total" :page.sync="pagination.pageNum" :limit.sync="pagination.pageSize"
          @pagination="viewDetails" />
      </el-dialog>



      <!-- Item Performance报告相关代码 -->
      <el-dialog :visible.sync="itemPerformanceDialogVisible" title="Item Performance Report Details" width="80%"
        :before-close="handleBeforeClose">
        <el-table :data="itemReportDetails" style="width:100%">

          <!-- 商品 SKU -->
          <el-table-column label="SKU" prop="skuId" min-width="180">
            <template slot-scope="scope">
              <el-tooltip class="item" effect="dark" :content="String(scope.row.skuId)" placement="top">
                <span class="ellipsis-text">{{ scope.row.skuId }}</span>
              </el-tooltip>
            </template>
          </el-table-column>

          <!-- 商品 ItemID -->
          <el-table-column label="Item ID" prop="itemId" min-width="180">
            <template slot-scope="scope">
              <el-tooltip class="item" effect="dark" :content="String(scope.row.itemId)" placement="top">
                <span class="ellipsis-text">{{ scope.row.itemId }}</span>
              </el-tooltip>
            </template>
          </el-table-column>

          <!-- 商品名称 -->
          <el-table-column label="Product Name" prop="productName" min-width="180">
            <template slot-scope="scope">
              <el-tooltip class="item" effect="dark" :content="String(scope.row.productName)" placement="top">
                <span class="ellipsis-text">{{ scope.row.productName }}</span>
              </el-tooltip>
            </template>
          </el-table-column>

          <!-- 超级部门 -->
          <el-table-column label="Super Department" prop="superDepartment" min-width="180">
            <template slot-scope="scope">
              <el-tooltip class="item" effect="dark" :content="String(scope.row.superDepartment)" placement="top">
                <span class="ellipsis-text">{{ scope.row.superDepartment }}</span>
              </el-tooltip>
            </template>
          </el-table-column>

          <!-- 部门 -->
          <el-table-column label="Department" prop="department" min-width="180">
            <template slot-scope="scope">
              <el-tooltip class="item" effect="dark" :content="String(scope.row.department)" placement="top">
                <span class="ellipsis-text">{{ scope.row.department }}</span>
              </el-tooltip>
            </template>
          </el-table-column>

          <!-- 类别 -->
          <el-table-column label="Category" prop="category" min-width="180">
            <template slot-scope="scope">
              <el-tooltip class="item" effect="dark" :content="String(scope.row.category)" placement="top">
                <span class="ellipsis-text">{{ scope.row.category }}</span>
              </el-tooltip>
            </template>
          </el-table-column>

          <!-- 子类别 -->
          <el-table-column label="Sub Category" prop="subCategory" min-width="180">
            <template slot-scope="scope">
              <el-tooltip class="item" effect="dark" :content="String(scope.row.subCategory)" placement="top">
                <span class="ellipsis-text">{{ scope.row.subCategory }}</span>
              </el-tooltip>
            </template>
          </el-table-column>

          <!-- 品牌 -->
          <el-table-column label="Brand" prop="brand" min-width="180">
            <template slot-scope="scope">
              <el-tooltip class="item" effect="dark" :content="String(scope.row.brand)" placement="top">
                <span class="ellipsis-text">{{ scope.row.brand }}</span>
              </el-tooltip>
            </template>
          </el-table-column>

          <!-- GMV -->
          <el-table-column label="GMV" prop="gmv" min-width="180">
            <template slot-scope="scope">
              <el-tooltip class="item" effect="dark" :content="String(scope.row.gmv)" placement="top">
                <span class="ellipsis-text">{{ scope.row.gmv }}</span>
              </el-tooltip>
            </template>
          </el-table-column>

          <!-- Commission -->
          <el-table-column label="Commission" prop="commission" min-width="180">
            <template slot-scope="scope">
              <el-tooltip class="item" effect="dark" :content="String(scope.row.commission)" placement="top">
                <span class="ellipsis-text">{{ scope.row.commission }}</span>
              </el-tooltip>
            </template>
          </el-table-column>

          <!-- GMV-Commission -->
          <el-table-column label="GMV-Commission" prop="gmvCommission" min-width="180">
            <template slot-scope="scope">
              <el-tooltip class="item" effect="dark" :content="String(scope.row.gmvCommission)" placement="top">
                <span class="ellipsis-text">{{ scope.row.gmvCommission }}</span>
              </el-tooltip>
            </template>
          </el-table-column>

          <!-- AUR -->
          <el-table-column label="AUR" prop="aur" min-width="180">
            <template slot-scope="scope">
              <el-tooltip class="item" effect="dark" :content="String(scope.row.aur)" placement="top">
                <span class="ellipsis-text">{{ scope.row.aur }}</span>
              </el-tooltip>
            </template>
          </el-table-column>

          <!-- Total Units Sold -->
          <el-table-column label="Total Units Sold" prop="totalUnitsSold" min-width="180">
            <template slot-scope="scope">
              <el-tooltip class="item" effect="dark" :content="String(scope.row.totalUnitsSold)" placement="top">
                <span class="ellipsis-text">{{ scope.row.totalUnitsSold }}</span>
              </el-tooltip>
            </template>
          </el-table-column>

          <!-- Cancelled Units -->
          <el-table-column label="Cancelled Units" prop="cancelledUnits" min-width="180">
            <template slot-scope="scope">
              <el-tooltip class="item" effect="dark" :content="String(scope.row.cancelledUnits)" placement="top">
                <span class="ellipsis-text">{{ scope.row.cancelledUnits }}</span>
              </el-tooltip>
            </template>
          </el-table-column>

          <!-- Cancelled Sales -->
          <el-table-column label="Cancelled Sales" prop="cancelledSales" min-width="180">
            <template slot-scope="scope">
              <el-tooltip class="item" effect="dark" :content="String(scope.row.cancelledSales)" placement="top">
                <span class="ellipsis-text">{{ scope.row.cancelledSales }}</span>
              </el-tooltip>
            </template>
          </el-table-column>

          <!-- Item Conversion Rate -->
          <el-table-column label="Item Conversion Rate" prop="itemConversionRate" min-width="180">
            <template slot-scope="scope">
              <el-tooltip class="item" effect="dark" :content="String(scope.row.itemConversionRate)" placement="top">
                <span class="ellipsis-text">{{ scope.row.itemConversionRate }}</span>
              </el-tooltip>
            </template>
          </el-table-column>

          <!-- Base Item Id -->
          <el-table-column label="Base Item Id" prop="baseItemId" min-width="180">
            <template slot-scope="scope">
              <el-tooltip class="item" effect="dark" :content="String(scope.row.baseItemId)" placement="top">
                <span class="ellipsis-text">{{ scope.row.baseItemId }}</span>
              </el-tooltip>
            </template>
          </el-table-column>

          <!-- Total Product Visits -->
          <el-table-column label="Total Product Visits" prop="totalProductVisits" min-width="180">
            <template slot-scope="scope">
              <el-tooltip class="item" effect="dark" :content="String(scope.row.totalProductVisits)" placement="top">
                <span class="ellipsis-text">{{ scope.row.totalProductVisits }}</span>
              </el-tooltip>
            </template>
          </el-table-column>

          <!-- GMV Comp % -->
          <el-table-column label="GMV Comp %" prop="gmvCompPercent" min-width="180">
            <template slot-scope="scope">
              <el-tooltip class="item" effect="dark" :content="String(scope.row.gmvCompPercent)" placement="top">
                <span class="ellipsis-text">{{ scope.row.gmvCompPercent }}</span>
              </el-tooltip>
            </template>
          </el-table-column>

          <!-- Authorized Orders -->
          <el-table-column label="Authorized Orders" prop="authorizedOrders" min-width="180">
            <template slot-scope="scope">
              <el-tooltip class="item" effect="dark" :content="String(scope.row.authorizedOrders)" placement="top">
                <span class="ellipsis-text">{{ scope.row.authorizedOrders }}</span>
              </el-tooltip>
            </template>
          </el-table-column>

          <!-- Authorized Units -->
          <el-table-column label="Authorized Units" prop="authorizedUnits" min-width="180">
            <template slot-scope="scope">
              <el-tooltip class="item" effect="dark" :content="String(scope.row.authorizedUnits)" placement="top">
                <span class="ellipsis-text">{{ scope.row.authorizedUnits }}</span>
              </el-tooltip>
            </template>
          </el-table-column>

          <!-- Authorized Sales -->
          <el-table-column label="Authorized Sales" prop="authorizedSales" min-width="180">
            <template slot-scope="scope">
              <el-tooltip class="item" effect="dark" :content="String(scope.row.authorizedSales)" placement="top">
                <span class="ellipsis-text">{{ scope.row.authorizedSales }}</span>
              </el-tooltip>
            </template>
          </el-table-column>

          <!-- Total LY GMV -->
          <el-table-column label="Total LY GMV" prop="totalLyGmv" min-width="180">
            <template slot-scope="scope">
              <el-tooltip class="item" effect="dark" :content="String(scope.row.totalLyGmv)" placement="top">
                <span class="ellipsis-text">{{ scope.row.totalLyGmv }}</span>
              </el-tooltip>
            </template>
          </el-table-column>

          <!-- Product Level Pageviews -->
          <el-table-column label="Product Level Pageviews" prop="productLevelPageviews" min-width="180">
            <template slot-scope="scope">
              <el-tooltip class="item" effect="dark" :content="String(scope.row.productLevelPageviews)" placement="top">
                <span class="ellipsis-text">{{ scope.row.productLevelPageviews }}</span>
              </el-tooltip>
            </template>
          </el-table-column>

          <!-- Product Level Conversion Rate -->
          <el-table-column label="Product Level Conversion Rate" prop="productLevelConversionRate" min-width="180">
            <template slot-scope="scope">
              <el-tooltip class="item" effect="dark" :content="String(scope.row.productLevelConversionRate)"
                placement="top">
                <span class="ellipsis-text">{{ scope.row.productLevelConversionRate }}</span>
              </el-tooltip>
            </template>
          </el-table-column>

          <!-- Refunded Sales -->
          <el-table-column label="Refunded Sales" prop="refundedSales" min-width="180">
            <template slot-scope="scope">
              <el-tooltip class="item" effect="dark" :content="String(scope.row.refundedSales)" placement="top">
                <span class="ellipsis-text">{{ scope.row.refundedSales }}</span>
              </el-tooltip>
            </template>
          </el-table-column>

        </el-table>

        <!-- 添加分页 -->
        <pagination v-show="total > 0" :total="total" :page.sync="pagination.pageNum" :limit.sync="pagination.pageSize"
          @pagination="viewDetails" />
      </el-dialog>


    </div>
  </div>
</template>

<script>
import { listReport, getReport, delReport, addReport, updateReport, downloadReport } from "@/api/datacenter/report";
export default {
  name: "Report",
  dicts: ['walmart_report_status', 'walmart_report_request_type', 'walmart_publish_status', 'walmart_fulfillment_types'],
  data() {
    return {
      // 遮罩层
      loading: true,
      // 选中数组
      ids: [],
      // 非单个禁用
      single: true,
      // 非多个禁用
      multiple: true,
      // 显示搜索条件
      showSearch: true,
      // 总条数
      total: 0,
      // walmart商品报告表格数据
      reportList: [],
      // 弹出层标题
      title: "",
      // 是否显示弹出层
      open: false,
      // 查询参数
      queryParams: {
        pageNum: 1,
        pageSize: 10,
        sku: null,
        productName: null,
        currency: null,
        wpid: null,
        gtin: null,
        upc: null,
        brand: null,
        reportType: '0',  // 设置默认选择为'default'
      },
      // 表单参数
      form: {},
      // 表单校验
      rules: {
      },
      isButtonDisabled: true,  // 默认禁用按钮
      requestQueryForm: {
        reportType: '0',  // 设置默认值
      },
      loadingButton: false,  // 控制按钮的加载状态

      pagination: {
        requestId: null,
        reportType: null,
        pageNum: 1,
        pageSize: 10
      },
      // 其他数据属性
      reportTypes: [
        "ITEM",
        "INVENTORY",
        "CANCELLATION",
        "DELIVERY_DEFECT",
        "ITEM_PERFORMANCE",
        "PROMO",
        "RETURN_OVERRIDES",
        "CPA",
        "SHIPPING_CONFIGURATION",
        "SHIPPING_PROGRAM",
        "FITMENT_MISSING_ATTR",
        "FITMENT_ACES_COVERAGE",
        "BUYBOX",
        "ASSORTMENT_RECOMMENDATIONS",
        "LAGTIME"
      ],
      ItemDialogVisible: false,  // 控制项目报告弹窗显示
      itemReportDetails: [],  // 存储报告详情
      inventroyDialogVisible: false, // 控制库存报告详情
      shippingConfigDialogVisible: false, // 控制shippingConfig报告弹窗显示
      shippingProgramDialogVisible: false, // 控制shippingProgram报告弹窗显示
      returnOverridesDialogVisible: false, // 控制returnOverrides报告弹窗显示
      promotionReportDialogVisible: false, // 控制promotion报告弹窗显示
      fitmentMissingAttrDialogVisible: false, // 控制fitmentMissingAttr报告弹窗显示
      fitmentAcesCoverageDialogVisible: false, // 控制FitmentAcesCoverage报告弹窗显示
      buyBoxDialogVisible: false, // 控制BuyBox报告弹窗显示
      LagTimeDialogVisible: false, // 控制LagTime报告弹窗显示
      assortmentRecommendationslogVisible: false, // 控制assortmentRecommendations报告弹窗显示
      cancellationReportDialogVisible: false, // 控制cancellation报告弹窗显示
      CpaDialogVisible: false, // 控制cpa报告弹窗显示
      deliveryDefectReportDialogVisible: false, // 控制deliveryDefect报告弹窗显示
      itemPerformanceDialogVisible: false, // 控制deliveryDefect报告弹窗显示
      // reportColumns: {
      //   ITEM: [
      //     { label: 'SKU', prop: 'sku' },
      //     { label: 'Item ID', prop: 'itemId' },
      //     { label: 'Product Name', prop: 'productName' },
      //     { label: 'Lifecycle Status', prop: 'lifecycleStatus' },
      //     { label: 'Publish Status', prop: 'publishStatus' },
      //     { label: 'Status Change Reason', prop: 'statusChangeReason' },
      //     { label: 'Product Category', prop: 'productCategory' },
      //     { label: 'Price', prop: 'price' },
      //     { label: 'Currency', prop: 'currency' },
      //     { label: 'Buy Box Item Price', prop: 'buyBoxItemPrice' },
      //     { label: 'Buy Box Shipping Price', prop: 'buyBoxShippingPrice' },
      //     { label: 'MSRP', prop: 'msrp' },
      //     { label: 'Product Tax Code', prop: 'productTaxCode' },
      //     { label: 'Shipping Methods', prop: 'shipMethods' },
      //     { label: 'Shipping Weight', prop: 'shippingWeight' },
      //     { label: 'Shipping Weight Unit', prop: 'shippingWeightUnit' },
      //     { label: 'Fulfillment Lag Time', prop: 'fulfillmentLagTime' },
      //     { label: 'Fulfillment Type', prop: 'fulfillmentType' },
      //     { label: 'WFS Sales Restriction', prop: 'wfsSalesRestriction' },
      //     { label: 'WPID', prop: 'wpid' },
      //     { label: 'GTIN', prop: 'gtin' },
      //     { label: 'UPC', prop: 'upc' },
      //     { label: 'Item Page URL', prop: 'itemPageUrl' },
      //     { label: 'Primary Image URL', prop: 'primaryImageUrl' },
      //     { label: 'Shelf Name', prop: 'shelfName' },
      //     { label: 'Primary Category Path', prop: 'primaryCategoryPath' },
      //     { label: 'Brand', prop: 'brand' },
      //     { label: 'Offer Start Date', prop: 'offerStartDate' },
      //     { label: 'Offer End Date', prop: 'offerEndDate' },
      //     { label: 'Item Creation Date', prop: 'itemCreationDate' },
      //     { label: 'Item Last Updated', prop: 'itemLastUpdated' },
      //     { label: 'Reviews Count', prop: 'reviewsCount' },
      //     { label: 'Average Rating', prop: 'averageRating' },
      //     { label: 'Searchable', prop: 'searchable' },
      //     { label: 'Competitor URL', prop: 'competitorUrl' },
      //     { label: 'Competitor Price', prop: 'competitorPrice' },
      //     { label: 'Competitor Ship Price', prop: 'competitorShipPrice' },
      //     { label: 'Competitor Last Date Fetched', prop: 'competitorLastDateFetched' }
      //   ],
      //   INVENTORY: ['inventoryId', 'quantity', 'location'],
      //   // 为其他报告类型添加列
      // },
    };
  },
  created() {
    this.getList();
  },
  methods: {
    /** 查询walmart商品报告列表 */
    getList() {
      this.loading = true;
      listReport(this.queryParams).then(response => {
        this.reportList = response.rows;
        this.total = response.total;
        this.loading = false;
      });
    },
    // 取消按钮
    cancel() {
      this.open = false;
      this.reset();
    },
    // 表单重置
    reset() {
      this.form = {
        itemReportId: null,
        itemId: null,
        sku: null,
        productName: null,
        primaryImageUrl: null,
        price: null,
        currency: null,
        wpid: null,
        gtin: null,
        upc: null,
        brand: null,
        authId: null,
        itemLastUpdated: null,
        requestId: null
      };
      this.resetForm("form");
    },
    /** 搜索按钮操作 */
    handleQuery() {
      this.queryParams.pageNum = 1;
      this.getList();
    },
    /** 重置按钮操作 */
    resetQuery() {
      this.resetForm("queryForm");
      this.handleQuery();
    },
    // 多选框选中数据
    handleSelectionChange(selection) {
      this.ids = selection.map(item => item.itemReportId)
      this.single = selection.length !== 1
      this.multiple = !selection.length
    },
    /** 导出按钮操作 */
    handleExport() {
      this.download('datacenter/report/export', {
        ...this.queryParams
      }, `report_${new Date().getTime()}.xlsx`)
    },
    formatDateTime(row, column, cellValue, index) {
      // 如果没有值，返回 '-'
      if (!cellValue) return '-';

      // 格式化日期
      const date = new Date(cellValue);

      // 使用 toLocaleString 格式化日期为中国标准时间
      const formattedDate = date.toLocaleString('zh-CN', {
        year: 'numeric',
        month: '2-digit',
        day: '2-digit',
        hour: '2-digit',
        minute: '2-digit',
        second: '2-digit',
        hour12: false // 24小时制
      });

      // 替换掉日期中的 / 为 -
      const formattedDateWithDash = formattedDate.replace(/\//g, '-');

      return formattedDateWithDash;
    },

    handleReportTypeChange() {
      // 判断选择的值是否为0，决定按钮的启用/禁用状态
      if (this.requestQueryForm.reportType !== '0') {
        this.isButtonDisabled = false;
      } else {
        this.isButtonDisabled = true;
      }
    },


    /** 当用户填写Item Creation Date的Start Date时 */
    handleCreationStartDateChange() {
      if (!this.requestQueryForm.createStartDate) {
        // 如果Start Date填写了但End Date为空，将End Date设置为当前日期
        this.requestQueryForm.createEndDate = null;
      }
    },


    /** 当用户填写Item Last Updated的Start Date时 */
    handleUpdatedStartDateChange() {
      if (!this.requestQueryForm.lastUpdatedStartDate) {
        this.requestQueryForm.lastUpdatedEndDate = null;
      }
    },


    /** 请求报告的处理逻辑 */
    handleRequestReport() {
      // 如果Start Date填写了但End Date为空，自动设置End Date为当前日期
      if (this.requestQueryForm.createStartDate && !this.requestQueryForm.createEndDate) {
        this.requestQueryForm.createEndDate = new Date().toISOString().split('T')[0];
      }
      if (this.requestQueryForm.lastUpdatedStartDate && !this.requestQueryForm.lastUpdatedEndDate) {
        this.requestQueryForm.lastUpdatedEndDate = new Date().toISOString().split('T')[0];
      }
      // 在请求报告时显示加载状态
      this.loadingButton = true;

      // 请求报告的处理逻辑
      addReport(this.requestQueryForm).then(response => {

        // 请求成功后，执行相应的操作，比如刷新数据等
        this.$modal.msgSuccess("" + response.msg);

        // 请求完成后，取消按钮的加载状态
        this.loadingButton = false;
        this.getList();
      }).catch(error => {
        // 请求失败时，取消按钮的加载状态
        this.loadingButton = false;

        // 错误处理，比如弹出提示
        this.$modal.msgError("请求报告失败");
      });
    },

    // 处理查询报告类型变化
    handleReportTypeChangeQuery() {
      this.getList();  // 触发getList方法来重新获取数据
    },

    handleCancelRequest() {
      // 点击“取消”按钮时恢复到默认选项，并禁用按钮
      this.requestQueryForm.reportType = '0'; // 恢复报告类型为默认值
      this.requestQueryForm.publishStatus = [];  // 清空发布状态
      this.requestQueryForm.fulfillmentType = [];  // 清空履行类型
      this.requestQueryForm.createStartDate = null; // 清空创建开始日期
      this.requestQueryForm.createEndDate = null; // 清空创建结束日期
      this.requestQueryForm.lastUpdatedStartDate = null; // 清空最后更新时间开始日期
      this.requestQueryForm.lastUpdatedEndDate = null; // 清空最后更新时间结束日期

      this.isButtonDisabled = true; // 禁用请求报告按钮

      this.$modal.msgWarning("已取消请求");
    },

    /** 当报告未请求完成时的提示 */
    handleReportNotReady(scope) {
      console.log(scope.row.status);
      if(scope.row.status == 4){
        this.$modal.msgWarning("请求报告异常，查看失败！");
        return;
      }
      this.$modal.msgWarning("报告未请求完毕，请稍后再试。");
    },
    // 下载报告文件
    walmartDownloadReport(row) {
      // 如果状态不为3，提醒用户报告未完成
      if (row.status !== 3) {
        this.handleReportNotReady();
        return;
      }
      // 获取请求的 reportId 和格式化后的日期
      const requestId = row.requestId; // 假设你在表格的行数据中存储了 requestId
      const date = this.formatDateTime(row, null, row.requiredDateTime, null).split(' ')[0]; // 使用 formatDateTime 格式化日期

      console.log(row.reportType);

      // 准备下载参数
      const params = {
        requestId: requestId,
        requiredDateTime: date
      }

      this.download('/datacenter/report/download', params, `report_${date}_${this.reportTypes[row.reportType - 1]}.zip`)
    },
    handleBeforeClose(done) {
      // 执行自定义的关闭前操作
      this.getList();

      // 如果需要阻止关闭，可以调用 done(false)
      // done(false);  // 注释掉这一行将允许关闭

      // 如果执行了异步操作，可以在操作完成后调用 done()
      setTimeout(() => {
        done();  // 关闭弹窗
      }, 50); // 模拟异步操作
    },
    viewDetails(row) {
      console.log(row.reportType);

      if (row.requestId && row.reportType && row.status !== 3) {
        this.handleReportNotReady(row);
        return;
      }

      if (row.requestId && row.reportType) {
        this.pagination.requestId = row.requestId;
        this.pagination.reportType = row.reportType;
      }
      // 请求报告的处理逻辑
      getReport(this.pagination).then(response => {
        this.total = response.total;
        this.itemReportDetails = response.rows; // 假设 row.itemDetails 包含了对应的商品详细信息

        if (row.reportType && row.reportType === 1) {
          this.ItemDialogVisible = true; // 显示弹窗
        } else if (row.reportType && row.reportType === 2) {
          this.inventroyDialogVisible = true;
        } else if (row.reportType && row.reportType === 9) {
          this.shippingConfigDialogVisible = true;
        } else if (row.reportType && row.reportType === 10) {
          this.shippingProgramDialogVisible = true;
        } else if (row.reportType && row.reportType === 7) {
          this.returnOverridesDialogVisible = true;
        } else if (row.reportType && row.reportType === 6) {
          this.promotionReportDialogVisible = true;
        } else if (row.reportType && row.reportType === 11) {
          this.fitmentMissingAttrDialogVisible = true;
        } else if (row.reportType && row.reportType === 13) {
          this.buyBoxDialogVisible = true;
        } else if (row.reportType && row.reportType === 12) {
          this.fitmentAcesCoverageDialogVisible = true;
        } else if (row.reportType && row.reportType === 15) {
          this.LagTimeDialogVisible = true;
        } else if (row.reportType && row.reportType === 14) {
          this.assortmentRecommendationslogVisible = true;
        } else if (row.reportType && row.reportType === 3) {
          this.cancellationReportDialogVisible = true;
        } else if (row.reportType && row.reportType === 8) {
          this.CpaDialogVisible = true;
        } else if (row.reportType && row.reportType === 4) {
          this.deliveryDefectReportDialogVisible = true;
        } else if (row.reportType && row.reportType === 5) {
          this.itemPerformanceDialogVisible = true;
        }
      }).catch(error => {
        this.$modal.msgError("获取详情数据失败");
      });
    }
  }
};
</script>
<style scoped>
.report-request-item {
  background-color: #ffffff;
  border-radius: 10px;
  padding: 20px 20px;
  /* 添加阴影 */
  box-shadow: 0 3px 5px 2px rgba(0, 0, 0, 0.15) !important;
  margin-bottom: 20px;
}

.report-query-item {
  background-color: #ffffff;
  border-radius: 10px;
  padding: 20px 20px;
  /* 添加阴影 */
  box-shadow: 0 3px 5px 2px rgba(0, 0, 0, 0.15) !important;
  margin-bottom: 20px;
}

.report-request {
  padding: 0 0;
  text-align: left;
}

.request-title {
  font-size: 20px;
  font-weight: bold;
}

.request-description {
  display: block;
  margin: 20px 0;
  font-size: 14px;
  color: #999;
}

.button-group {
  text-align: right;
  margin-top: 20px;
}

.el-button {
  margin: 0 10px;
}

/* 限制文本宽度并使用省略号显示 */
.ellipsis-text {
  display: inline-block;
  max-width: 100%;
  /* 这里可以根据需求设置最大宽度 */
  white-space: nowrap;
  /* 不换行 */
  overflow: hidden;
  /* 超出部分隐藏 */
  text-overflow: ellipsis;
  /* 超出部分显示省略号 */
}
</style>